html5-canvas 相关问题

Canvas是一个HTML元素,允许2D和3D中的2D形状,3D形状,位图图像和动画的动态,可编写脚本的渲染。

如何操纵颜色以快速更新 html 画布上的许多点

我用js写了一个模拟,还有动画组件。 html 画布上有一堆圆圈。我想删除1个圆圈。 通常我只是清理画布并重新绘制所有内容

回答 1 投票 0

将 Three.js 背景更改为透明或其他颜色

我一直在尝试将画布的默认背景颜色从黑色更改为透明/任何其他颜色 - 但没有运气。 我的HTML: 我的CSS: ...

回答 7 投票 0

如何禁用 webgpu 的抗锯齿功能

对象文字只能指定已知属性,并且“GPUCanvasConfiguration”类型中不存在“抗锯齿”。ts(2353) 但是如何禁用抗锯齿功能呢?

回答 1 投票 0

如何让动态画布元素位于偏移 div 内的其他内容后面?

我正在使用 granim.js 在画布中生成动态移动的渐变。我想让它成为 div 元素的背景内容。因为 granim.js 动态生成内容,使用 ca...

回答 1 投票 0

Firefox 中 JS Canvas Arc 函数中的行尾错误

虽小但意义重大:我想在 Firefox 的 JS Canvas 中画一个带有轮廓的半圆。不知何故,笔划的行尾不符合其应有的目的,这对我的理解来说是一个坚实的 h...

回答 1 投票 0

在 HTML Canvas 中打字时使文本适合圆形(带缩放)

我试图在打字时让文本适合一个圆圈,如下所示: 我尝试遵循 Mike Bostock 的将文本调整为圆形教程,但到目前为止失败了,这是我可怜的尝试: 导入反应,{

回答 1 投票 0

context.drawImage() 即使在 .onLoad 之后也无法在移动设备上工作(TypeError:null 不是对象)

对此感到非常困惑...我的代码在桌面上运行良好,但由于某种原因它无法在移动浏览器上正确运行。我认为这可能是因为画布创建速度不够快......

回答 1 投票 0

从数据库中存储的图像数据在画布上绘制图像

我正在使用 HTML 和 JS 创建一个持久白板应用程序,用户在画布上绘图并单击“保存”,这会将画布图像数据存储到 MySQL DB。当页面重新加载时,画布...

回答 1 投票 0

JavaScript 根据数据库中存储的图像数据在画布上绘制图像

我正在使用 HTML 和 JS 创建一个持久白板应用程序,用户在 cnavas 上的画布上绘图,单击“保存”,将画布图像数据存储到 mysql 数据库。当页面重新加载时,ca...

回答 1 投票 0

无法在 Javascript 中同时创建两个对象。一个物体隐藏了另一个物体

我想使用javascript创建一个符号。它需要创建圆形和矩形。我创建了圆形和矩形。但是当矩形放在圆形下面时,则圆形不显示。如何解决这个问题...

回答 1 投票 0

将画布绘图存储在本地存储中并显示为图像? (javascript)

我想将画布绘图存储在本地存储中,然后使用javascript显示为图像? 帮助 med 了解如何最好地存储画布,然后将其显示为图像! 结果我...

回答 1 投票 0

Nextjs / ReactJS 中页面切换时 Spline / canvas 重新渲染

我有3D设计样条线,我想将我的样条线导出到我的网站,样条线在我的网站上运行良好,但问题是当我将页面从主页切换到关于页面时,样条线重新-

回答 1 投票 0

如何缩放画布而不模糊边缘?

我正在尝试使用 Svelte 制作一个精灵编辑器,我能够完成基本的像素绘制,它只是边缘看起来有点模糊,我似乎不明白为什么。 <question vote="0"> <p>我正在尝试使用 Svelte 制作一个精灵编辑器,我能够完成基本的像素绘制,它只是边缘看起来有点模糊,我似乎不明白为什么。</p> <pre><code>&lt;script lang=&#34;ts&#34;&gt; let canvas: HTMLCanvasElement; let ctx: CanvasRenderingContext2D; let ratio = 1; $: if (canvas &amp;&amp; !ctx) { ctx = canvas.getContext(&#39;2d&#39;)!; const ogWidth = canvas.width; const canvasRect = canvas.getBoundingClientRect(); canvas.width = canvasRect.width; canvas.height = canvasRect.height; ratio = canvas.width / ogWidth; ctx.scale(ratio, ratio); // draw ctx.fillStyle = &#39;black&#39;; ctx.fillRect(1, 1, 1, 1); } const onMouseDown = (e: MouseEvent) =&gt; { // get closest pixel const x = Math.floor(e.offsetX / ratio); const y = Math.floor(e.offsetY / ratio); console.log(x); // draw ctx.fillStyle = &#39;black&#39;; ctx.fillRect(x, y, 1, 1); }; &lt;/script&gt; &lt;div class=&#34;w-full h-screen flex justify-center items-center object-contain&#34;&gt; &lt;canvas width=&#34;16&#34; height=&#34;16&#34; bind:this={canvas} class=&#34;w-[1024px] border&#34; on:mousedown={onMouseDown} &gt;&lt;/canvas&gt; &lt;/div&gt; </code></pre> <p>我可能只是在欺骗自己,但是当我查看其他在线像素艺术编辑器(例如 Piskel)时,像素看起来更加清晰。</p> <p><a href="https://svelte.dev/repl/01c287a93aa64328b975682800e3038f?version=3.47.0" rel="nofollow noreferrer">Svelte REPL</a></p> </question> <answer tick="false" vote="0"> <p>我发现使用 CSS 属性<pre><code>image-rendering: pixelated;</code></pre>解决了我的问题并防止边缘被平滑</p> </answer> </body></html>

回答 0 投票 0

获取视频帧作为图像

我正在尝试从视频 http://techslides.com/demos/sample-videos/small.mp4 获取视频帧作为图像,并且我的应用程序正在 localhost:3000 上运行。下面是我从 vi 获取图像的代码...

回答 1 投票 0

在画布中绘制定时循环

我下面有这段代码,它应该根据计时器绘制周期。然而,它以 3 个同时的部分开始并绘制循环。我不明白为什么以及如何让它绘制一个平滑的循环: ...

回答 1 投票 0

为什么我必须将速度添加到object.position.y + object.height?

我的代码确实没有任何问题,我正在观看教程来帮助我学习在画布上制作游戏。我明白其中的每一点,但我不明白的一件事是为什么我必须......

回答 1 投票 0

为什么我的 JS 程序在有/没有“问题行”时表现不同?

问题所在的行在handleLineEnd函数中。 我撕掉了所有不需要显示问题的线条。 没有这条线:我可以在 ctx 上绘制多个矩形。 与行:每个记录...

回答 1 投票 0

缩放多边形以使边缘匹配

我正在使用 JavaScript 画布开发一个项目,并且需要能够将光标捕捉到距多边形一定距离。我已经可以捕捉到多边形本身,但我需要有光标

回答 5 投票 0

如何将GDI+ GraphicsPath转换为HTML5画布路径?

是否有一个库可以帮助将 GDI+ GraphicsPath 转换为 HTML5 画布路径?或者我是否必须手动运行所有 GraphicsPath.PathPoints 和 GraphicsPath.PathTypes 才能发出相应的

回答 2 投票 0

如何避免在 html5 canvas 内拉伸图像

画布占据了屏幕上的所有可用空间,我用它来渲染网站的背景。 帆布 { 位置:绝对; 宽度:100%; 身高...

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.