Question

是否可以使用HTML5和其他js库在画布上绘图并将结果图形用作div？

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

我在google上找到了paper.js，但那都是关于绘图的。如何在普通HTML（5）中将该绘图用作div是我的问题。谢谢

Answer 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规则。

Answer 2

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

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

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

2 个答案:

Online demo