在 HTML5 画布上绘图并将绘图用作 div答案

【问题标题】：Draw on HTML5 canvas and use the drawing as a div在 HTML5 画布上绘图并将绘图用作 div
【发布时间】：2014-02-14 17:32:16
【问题描述】：

是否可以使用 HTML5 和其他 js 库在画布上绘图，并将生成的绘图用作 div？

我有兴趣实现一个框（对于初学者），它不是由常规 css 边框绘制的，而是由画布上绘制的形状绘制的。那可能吗？如何？

我在 google 上找到了 paper.js，但这都是关于绘图的。如何在常规 HTML (5) 中将该绘图用作 div 是我的问题。谢谢

【问题讨论】：

Canvas 只是一个和其他元素一样的元素。您可以创建一个包含画布元素的 div。

标签： html html5-canvas paperjs

【解决方案1】：

您可以在画布上绘制您的形状（使用 paper.js 或纯 JavaScript），然后将其提取为您设置为 div 或其他元素的背景的图像。

请记住，如果 div 的大小发生变化，您需要更新背景。

var canvas = document.createElement('canvas'),
    div = document.getElementById('myDivElement'),
    ctx = canvas.getContext('2d'),
    cs = getComputedStyle(div),
    w = parseInt(cs.getPropertyValue('width') , 10),
    h = parseInt(cs.getPropertyValue('height') , 10);

canvas.width = w;
canvas.height = h;

/// draw something on canvas
ctx.lineWidth = 5;
ctx.strokeStyle = '#f90';
ctx.strokeRect(0, 0, w, h);

/// set as background:
div.style.backgroundImage = 'url(' + canvas.toDataURL() + ')';

Online demo

请注意，许多因素都会影响 div 的大小，例如内边距、边距、框大小、边框等。在计算画布大小时，您需要考虑这些因素。在许多情况下，更好的选择是使用box-sizing: border-box; 作为相关元素的 CSS 规则。

【讨论】：

【解决方案2】：

canvas 是一个 DOM 元素，您可以在其中绘制任意矢量和光栅图形。 div 是另一种可以包含其他元素的 DOM 元素，例如 canvas。

您在canvas 元素中绘制的图形是不是 DOM 元素，您可以与div、span、p、table 相同的方式进行交互，等等。所以我认为你的问题的答案是否定的。

【讨论】：

感谢您为我清除它。但是我是否理解如果我使用 div，在其中放置一个画布，然后我可以在该画布上进行绘制，同时仍然能够在其上放置其他元素？
例如，我制作了一个 400x400px 的矩形 div。然后在其中放置一个画布元素，在上面绘制一些东西......我仍然可以使用该绘图作为我的 div 的背景，对吗？
我会用这个jsfiddle.net/jarble/U72dt/8 回答自己（在另一个问题中找到）。感谢您的宝贵时间。
如果这不是正确答案，那么您不应该接受它并自己回答问题。