html5-canvas 相关问题

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

如何正确添加透明度值？

以下示例绘制两个框。第一个框只是用 globalAlpha 为 1 绘制的一个框。第二个框是 globalAlpha 为 0.5 的 2 个框的总和。 const canvas = 文档。

html5-canvas alpha

回答 1 投票 0

如何在 Fabric.js 中的对象周围创建自定义边界框，该边界框跟随旋转并在选择事件中持续存在？

标题：Fabric.js 中自定义边界框跟随旋转，但在取消选择和重新选择后不跟随描述：各位开发者大家好，我正在使用 Fabric.js 开发一个项目，我面临着......

javascript html5-canvas fabricjs

回答 1 投票 0

Javascript 内存泄漏在动画期间将新图像加载到对象中

我有一种方法，可以在每次循环动画时用新图像更新对象，但会导致持续的内存泄漏，最终使动画的其余部分陷入停滞。这是

javascript animation memory-leaks html5-canvas

回答 1 投票 0

将 SVG 颜色放入画布元素之前无法更改它

我有一个如下所示的 SVG（我无法更改 SVG 代码）：我有一个看起来像这样的 SVG（我无法更改 SVG 代码）： <?xml version="1.0" encoding="UTF-8"?> <svg id="shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"> <path d="M29.57,19.75l-3.5-13.59c-.12-.52-.45-.97-.89-1.23-2.03-1.25-4.19-1.28-6.22-.08-.59,.35-.96,1-.96,1.71v3.45h-4v-3.45c0-.71-.37-1.36-.96-1.71-2.04-1.19-4.19-1.16-6.22,.08-.44,.27-.76,.72-.88,1.22l-3.51,13.61h0c-.28,.7-.44,1.45-.44,2.25,0,3.31,2.69,6,6,6s6-2.69,6-6v-2h4v2c0,3.31,2.69,6,6,6s6-2.69,6-6c0-.79-.16-1.55-.44-2.25h0Zm-5.44-13.11l2.58,10.01c-.81-.41-1.73-.65-2.7-.65-1.54,0-2.94,.59-4.01,1.55l-.02-10.98c1.42-.83,2.74-.81,4.16,.08Zm-16.26-.01c1.42-.87,2.75-.89,4.14-.08v10.99c-1.06-.95-2.46-1.54-4-1.54-.98,0-1.89,.24-2.71,.65L7.86,6.63Zm.14,19.37c-2.21,0-4-1.79-4-4s1.79-4,4-4,4,1.79,4,4-1.79,4-4,4Zm6-8v-6h4v6h-4Zm10,8c-2.21,0-4-1.79-4-4s1.79-4,4-4,4,1.79,4,4-1.79,4-4,4Z"/> </svg> 我需要将此 SVG 放置在具有方形背景色的画布元素中，并将此 SVG 放置在中间。然而，SVG 是黑色的，我需要在将其放入画布之前将其设置为白色。这是我当前的代码： export const useRenderIcon = ( previewCanvas: React.RefObject<HTMLCanvasElement>, selectedColor: Color, selectedSVG: Svg ): void => { useEffect(() => { if (previewCanvas.current) { const ctx = previewCanvas.current.getContext("2d"); if (ctx) { previewCanvas.current.style.width = `${PREVIEW_CANVAS_SIZE}px`; previewCanvas.current.style.height = `${PREVIEW_CANVAS_SIZE}px`; // draw icon background color ctx.fillStyle = selectedColor.color; ctx.fillRect(0, 0, previewCanvas.current.width, previewCanvas.current.height); // draw icon svg const offset = previewCanvas.current.width - PREVIEW_SVG_SIZE; // calculate offset to center icon to middle of canvas const svgIconImage = new Image(); svgIconImage.setAttribute("src", selectedSVG.uri); svgIconImage.setAttribute("width", `${PREVIEW_SVG_SIZE}`); // trying to make it white svgIconImage.style.fill = "white"; svgIconImage.style.stroke = "white"; svgIconImage.onload = () => { // trying to make it white svgIconImage.style.fill = "white"; svgIconImage.style.stroke = "white"; ctx.imageSmoothingEnabled = false; ctx.drawImage(svgIconImage, offset / 2, offset / 2, PREVIEW_SVG_SIZE, PREVIEW_SVG_SIZE); }; } } }, [previewCanvas, selectedColor, selectedSVG]); }; 但是 svgIconImage.style.fill = "white"; 和 svgIconImage.style.stroke = "white"; 行没有任何区别。该图标确实以正确的背景颜色显示在画布上，但 SVG 图标保持黑色而不是变成白色。我该如何解决这个问题？最终获取 .svg 文件，使用 DOMParser 解析 SVG 字符串，使用 setAttribute 函数添加填充属性，并将解析后的 SVG 恢复为字符串。然后将其作为 DataURL 添加到 Image 对象的 src 属性中。 export const useRenderIcon = ( previewCanvas: React.RefObject<HTMLCanvasElement>, selectedColor: Color, selectedSVG: Svg ): void => { const [fetchedSvg, setFetchedSvg] = useState<string>(""); useEffect(() => { fetch(selectedSVG.uri) .then(response => response.text()) .then(data => { const domParser = new DOMParser(); const parsedSvg = domParser.parseFromString(data, "image/svg+xml"); if (selectedColor.type === "Light") { parsedSvg.getElementsByTagName("svg")[0].setAttribute("fill", "white"); } else { parsedSvg.getElementsByTagName("svg")[0].setAttribute("fill", "black"); } return parsedSvg.toString(); }) .then(data => setFetchedSvg(data)); }, [selectedColor, selectedSVG]); useEffect(() => { if (previewCanvas.current) { const ctx = previewCanvas.current.getContext("2d"); if (ctx) { // draw icon background color ctx.fillStyle = selectedColor.color; ctx.fillRect(0, 0, previewCanvas.current.width, previewCanvas.current.height); // draw icon svg const offset = previewCanvas.current.width - PREVIEW_SVG_SIZE; const svgIconImage = new Image(); svgIconImage.setAttribute("src", `data:image/svg+xml,${fetchedSvg}`); svgIconImage.setAttribute("width", `${PREVIEW_SVG_SIZE}`); svgIconImage.onload = () => { ctx.imageSmoothingEnabled = false; ctx.drawImage( svgIconImage, offset / window.devicePixelRatio, offset / window.devicePixelRatio, PREVIEW_SVG_SIZE, PREVIEW_SVG_SIZE ); }; } } }, [previewCanvas, selectedColor, selectedSVG, fetchedSvg]); };

javascript reactjs typescript svg html5-canvas

回答 1 投票 0

Three.js 2D 文本精灵标签

我是 Three.js 的新手，有一些属于 2D 文本的问题：我想要的是：我想要一些标签，例如。 x、y 和 z 轴。标签应始终面向相机。也许以后他们应该只是......

javascript html three.js html5-canvas

回答 3 投票 0

Fabric.js：如果对象在组中，则无法使用控件？

是关于这个小脚本的：https://jsfiddle.net/yd0mfwen/ ` // 创建 Fabric.js 画布 var canvas = new Fabric.Canvas('canvas'); img1 = 新布料.Circle({ 半径：200，菲尔...

javascript html5-canvas fabricjs

回答 1 投票 0

通过每帧绘制数千个矩形来提高 HTML5 画布的性能

我正在根据从服务器提取的实时频谱数据创建瀑布图。画布当前设置为渲染 100 行时间数据，每行 64 个点（最多 64,000 个矩形