Question

我有以下代码：

canvas = document.createElement('canvas')
context = canvas.getContext('2d')
canvas.width = window.innerWidth
canvas.height = 100
document.body.appendChild(canvas)

image = new Image()
image.src = 'http://units.wesnoth.org/1.5.10/pics/00006_flare.png'
image.style.border = '1px solid black'

document.body.appendChild(image)
context.drawImage(image, 5, 5)

您可以在jsfiddle here上查看。

该样式不适用于在Canvas中渲染的图像。如何将样式应用于画布中的元素？

Answer 1

设置CSS样式只影响元素，这里是图像元素。

当您将图像绘制到画布时，不会绘制元素而是绘制图像的位图。 Canvas就是这样，一个位图，与每个SE的CSS或DOM无关（它是一个DOM元素，但它内部发生的一切都是“低级”位图操作）。

要模拟绘制到画布的图像的边框，您可以将其绘制在顶部：

context.drawImage(image, 5, 5);
context.lineWidth = 3;
context.strokeStyle = '#00f';
context.strokeRect(5, 5, image.width, image.height);

（将x和y位置偏移0.5像素以使边框清晰）。

<强> Modified fiddle

PS：还记得使用onload处理程序正确处理图像加载，因为加载图像是异步的（也会更新它）。

为HTML5画布中的元素添加样式

1 个答案: