Canvas 向HTML5画布内的元素添加样式

我有以下代码：

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)

您可以在JSFIDLE上查看它

---

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

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

将图像绘制到画布时，您不会绘制元素，而是绘制图像的位图。画布只是一个位图，与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像素以使边界锐利）

---

PS：还请记住使用

onload

处理程序正确处理图像加载，因为加载图像是异步的（同时更新了fiddle）。lineWidth默认为1，strokeStyle默认为黑色，因此在fiddle中它们完全没有必要。