html5-canvas 相关问题

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

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

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

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

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

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

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

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

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

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

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

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

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

我正在尝试使用 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>

获取视频帧作为图像

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

在画布中绘制定时循环

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

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

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

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

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

缩放多边形以使边缘匹配

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

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

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

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

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

如何在画布上获取特定 x,y 位置的特定图像？ [已关闭]

我想在画布上的某个 x,y 位置获取图像，并在一定时间内将其更改为随机位置。我有图像 URl。 我尝试使用drawImage函数，但我得到了...

画布 html 中的中心图像

我试图将 svg 图像在画布中居中，但是图像转到右下角，我不明白我做错了什么。 注意：图像是 svg 图像，我尝试了 png 图像...

从canvas.measureText获取包含元素的预期渲染大小？

在将 DOM 元素中的文本附加到文档之前，我会获取 TextMetrics（位置：绝对/固定；显示：块；），如下所示： 函数 getTextMetrics(txt, 字体) { 常量画布 =

为什么 requestAnimationFrame 比 setInterval 或 setTimeout 更好

为什么我应该使用requestAnimationFrame而不是setTimeout或setInterval？ 这个自我回答的问题是一个文档示例。

2D HTML5 Canvas 游戏：特定宽度/高度限制玩家移动（未实现碰撞）

问：为什么根据画布的宽度/高度+玩家位置，这些方向上的移动受到限制，如何解决这个问题？ 正如标题中提到的，我一直在构建一个 2D 画布游戏（...

JavaScript Canvas 中的 HSB 颜色填充

我想用HSL颜色填充一些圆圈，这样我就可以改变它们的亮度值。 我是 JavaScript 编程的新手，我在 JavaScript 中找不到任何有关 HSL 颜色的信息。 我