如何使用画布修改图像

Question

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

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

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

编辑：

我在互联网上找到了一种方法，但对我来说效果不好：

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：无法将值转换为以下任何值：HTMLImageElement，HTMLCanvasElement，HTMLVideoElement。

Answer 1

您可以尝试使用SVG图片代码：

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

然后使用其他SVG元素绘制在顶部。