canvas 相关问题

使用Canvas API时有哪些典型的设计模式？

我开始使用 Canvas API 进行图形编程，但我还没有看到任何重用画布代码的设计模式。到目前为止，我只看到了使用全局画布对象和

pixijs 中的模糊 SVG

我正在尝试使用 PIXIJs 库来显示 SVG 图像，但在智能手机上 SVG 看起来很模糊。 这是示例代码 var $ = window.jQuery; var PIXI = window.PIXI; $(文档).准备好(

如何正确地将多个画布添加到PDF中？

我用iText 9.0.0编写了一个Java程序来创建PDF文件。我需要将外部 PDF 作为 XObject 添加到 PDF 的每个页面。如果 PDF 页数为 1 或 2，一切都会正常。但是，...

fabric.textbox 不适用于 google chrome？

我正在删除文本框中的所有文本，或者我正在使用退格键删除每个字母。再次删除所有字母后，我正在打字，但它被阻止了。不允许移动。

通过画布在页面上画笔效果

我正在研究必须在网页上创建类似画笔的效果的功能。 要求是背景中有多种可用的图案/纹理。还有你...

位于 WebGL 画布上的文本变得模糊

我遇到了一个问题，即与 WebGL 画布重叠的像素化文本变得明显模糊。图中是（1）稍微高于画布的元素，然后（2）触摸罐子......

手机端Javascript动画库HTML5 Canvas Tag

用于游戏开发的手机 HTML5 Canvas 标签最好的 JavaScript 动画库是什么？ 许多可用的库无法提供许多电话设备所需的性能...

如何使路径画布内部透明

我有如下的脚本， 它写了两个三角形。蓝色和红色。 那么现在我想让这个区域变得透明，而不是像剪纸作品那样蓝色和红色。 （我想把图片放背景...

如何在KonvaJs中实现文本的深度效果（伪3D）

预期的3D效果： 代码： 预期的3D效果： 代码： <Group ref={mainRef} x={x} y={y} scaleX={scaleX} scaleY={scaleY} onTap={onTap} rotation={rotation} onClick={onTap} draggable onDragEnd={onDragEnd} onDragMove={onDragMove} onTransformEnd={onTransformEnd} > {[...Array(6)].map((_, i) => <Text text={letter} x={i} y={i} fontFamily="Bangers-Regular" fontSize={fontSize} stroke="red" strokeWidth={3} fill="red" fillPriority="color" />)} < Text ref={(ref) => onRender(ref)} text={letter} fontFamily="Bangers-Regular" fontSize={fontSize} stroke="blue" strokeWidth={3} fill="blue" fillPriority="color" /> </Group> 上面代码的结果： 与 在比较中可以看到，参考3D效果的质量要高得多，并且没有锯齿，理论上我可以通过增加副本数量获得更好的效果，但放大时看起来仍然更差。 参考来源：https://www.graffiti-empire.com/graffiti-generator/ 一个可能的解决方案是在规模增加时增加步数： import React from "react"; import { createRoot } from "react-dom/client"; import { Stage, Layer, Rect, Text, Circle, Line, Group } from "react-konva"; const App = () => { const [scale, setScale] = React.useState(1); return ( <> <input type="range" min="0.5" max="5" step="0.1" value={scale} onChange={() => { setScale(Number(event.target.value)); }} /> <Stage width={window.innerWidth} height={window.innerHeight}> <Layer> <Group draggable scaleX={scale} scaleY={scale}> {[...Array(Math.round(6 * scale))].map((_, i) => ( <Text text={"Hello"} x={i / scale} y={i / scale} stroke="red" strokeWidth={3} fill="red" fillPriority="color" fontSize={50} /> ))} <Text text={"Hello"} stroke="blue" strokeWidth={3} fill="blue" fillPriority="color" fontSize={50} /> </Group> </Layer> </Stage> </> ); }; const container = document.getElementById("root"); const root = createRoot(container); root.render(<App />); https://codesandbox.io/p/sandbox/react-konva-3d-text-fj5gg4 注意：创建很多层可能会严重损害性能。我建议如果可能的话缓存该组。

使用后如何从 GPU 清理和卸载 WebGL 画布上下文？

如何清理 WebGL 上下文程序并从 GPU 和 dom-element 卸载程序、缓冲区和所有内容？ 我想确保我们没有乱扔垃圾。 另外，重复使用也很好

在 <canvas>

我搜索过这个主题，但找不到直接答案，而且我的javascript也不好。所以我希望有人能告诉我如何做到这一点。 我只是喜欢在canvas2D中显示数学......

尝试在html5中创建五彩纸屑效果，如何为每个元素获得不同的填充颜色？

编辑： 对于任何好奇的人来说，这是最终的结果。 https://jsfiddle.net/Javalsu/q1kmLoja/4/ 我正在构建在此链接中找到的代码 http://thecodeplayer.com/walkthrough/html5-

为什么画布中有一个像素的偏移？

我在 64x64 画布上绘制 16x16 像素的正方形，并使用 CSS 来缩放它们。然而，正方形的右角未对齐。谁能帮我弄清楚为什么会发生这种情况以及如何......

如何将图像在画布中居中 Python Tkinter

我正在开发一个程序。它获取图像并将其放入画布中。所以它就像一个照片查看器。但我想将图像放在画布小部件的中心。但似乎进入...

每次刷新后更改 HTML Canvas 上的图像

我正在学习如何使用 HTML 和 JavaScript，而且我还是个新手/初学者。 我最近通过课堂学习到能够创建画布并绘制图像或形状。 我创建了以下bu...

在放大的画布上绘制的线未绘制在正确的位置

我正在画布上制作绘图功能，但卡在缩放部分。谁能帮助我吗？ 当我处于最大缩小状态时，我能够准确绘制鼠标光标所在的位置。然而，...

如何在SVG中以不同的旋转角度旋转3D多矩形？

我想以 3D 方式旋转单个 SVG 的不同角度（矩形）的每个元素。所以我的 SVG 中的每个元素都应该有不同的旋转角度。 [我的意思是：图像][1] [1]：https://i.

Safari 和 canvas 的上下文丢失了

显然Safari（包括移动版本）是唯一不支持HTMLCanvasElement.contextlost 和HTMLCanvasElement.contextrestored 事件的主流浏览器。这是不是意味着……

Fabric.js 文本框调整大小和编辑可以在本地进行，但当 Canvas 存储在 Pinia 中时则不行

我正在使用 Fabric.js 和 Pinia 开发 Nuxt3 项目。我想使用 Pinia 商店全局管理 Fabric.js 画布实例。目标是使用 st 中的操作将文本添加到画布...

Javascript 使图像旋转以始终查看鼠标光标？

我正在尝试在 JavaScript 中让箭头指向我的鼠标光标。现在它只是剧烈旋转，而不是指向光标。 这是我的代码的小提琴：https://jsfiddle.net/