H5如何在 canvas 插入的图片上添加点击方法

Posted 2023-04-22

源码如下function HD()
$.ajax(
url: '../../Ashx/daata.ashx?type=Selectdatae',
type: "post",
success: function (data)
for (var i = 0; i < data.length; i++)
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image()
var timestamp = Date.parse(new Date());
switch (data[i]['Type'])
case "Video":
img.src = "../../Images/设备/摄像头.png?time=timestamp"
break;
case "Audio":
img.src = "../../Images/设备/通信设备.png?time=timestamp"
break;

img.id = data[i]['CodeID'];
img.name = data[i]['Name'];
ctx.drawImage(img, data[i]['Coordinates_X'], data[i]['Coordinates_Y']);



);

求问在循环生成的每一个Img下添加点击方法该如何添加。

参考技术A 只能给canvas添加点击事件，根据鼠标点击坐标，判断点击的是哪个图片
或者使用各种类库或插件本回答被提问者采纳

canvas绘制图片

参考技术A

绘制图片，要求图片必须在加载完成之后。
drawImage(img,x,y) 图片有多大绘制多大；
drawImage(img,x,y,iw,ih) 将图片绘制到指定大小内，会压缩或拉伸图片；
drawImage(img,ix,iy,iw,ih,cx,cy,cw,ch) 前4个参数决定从原图上指定位置剪下指定大小的图，绘制到指定位置的画布上的指定大小，会压缩或拉伸图片。
getImageData(x,y,w,h) 获取指定范围内的像素信息
putImageData(imgData,x,y) 向指定范围内绘制像素信息
clip() 裁剪：

我么可以使用给定的方法，完成图片的一些 滤镜效果 。

arr[i]=arr[i+1]=arr[i+2]=(arr[i]+arr[i+1]+arr[i+2])/3;

createPattern(img,repeatType) 创建平铺对象
repeatType:平铺类型 repeat-x repeat-y repeat no-repeat