javascript - 如何使用画布修改图像

Question

在我的 html 中，我已经加载了一张图片：

<img usemap="#prototypeMap" src="../../projects/tcas/TCAS display.jpg" style="z-index: 2;">

是否可以通过javascript创建一个画布来修改该图像？例如在其中绘制一条线，更改其中的颜色（对于某些像素）等等......

编辑：

我在 Internet 上找到了一种方法，但它对我不起作用：

var imgElement = document.getElementById('prototypeMap');

var canvas = document.createElement("canvas");
canvas.width = imgElement.offsetWidth;
canvas.height = imgElement.offsetHeight;
var ctx = canvas.getContext("2d");
ctx.drawImage(imgElement,0,0); //ERROR

最后一行给了我这个错误：TypeError: Value could not be convert to any of: HTMLImageElement, HTMLCanvasElement, HTMLVideoElement。

Answer 1

您可以尝试使用 SVG 图像标签：

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_Image_Tag

然后使用其他 SVG 元素在上面绘制。