在HTML5画布上绘图，并使用该绘图作为div

Question

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

我感兴趣的是实现一个框(对于初学者)，它不是由常规css边框绘制的，而是由画布上绘制的形状绘制的。这有可能吗？又是如何做到的？

我在谷歌上找到了paper.js，但这都是关于绘画的。如何在普通HTML (5)中将该绘图作为div使用是我的问题。谢谢

Answer 1

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

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

Answer 2

您可以在画布上绘制形状(使用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() + ')';

在线演示

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