HTML5 给图片对象添加事件_IT百科

你的意思是用canvas2D绘制是吧?

实际上,拿canvas2D绘制,只是把image渲染到 canvas(画布上).而实际的事件,就不能像标签那么处理,应该对canvas的事件做处理.

实现逻辑是这样:

1,添加事件监听,比如说,鼠标按下做什么,滑动做什么,d起做什么.一般鼠标事件都是判断d起的位置

2,判断有效坐标,在事件中判断坐标位置是否在图片位置,也就是图片在canvas的位置.

ex:

//some code...

canvas.width=400

canvas.height=400

var context2d = canvas.getContext("2d")

var img =new Image()

img.src="xxx/xxx.png"

img.onload=function(){

context2d.drawImage(img,X,Y,WIDTH,HEIGTH)

//X=0,Y=0,W=50,H=50

canvas.addEventListener("mouseup", keyUp, false)

}

function keyUp(evt){

Event_UpX = evt.offsetX

Event_UpY = evt.offsetY

if(Event_UpX>=绘制坐标X&&Event_UpX<=图片宽度){

if(Event_UpY>=绘制坐标Y&&Event_UpY<=图片高度){

//do something

}

你可以使用class属性 id是唯一的只能有一个

</div>

对class做 *** 作如果是jquery 的话 $("#adv>a>img") 这样

html图片添加的方法如下：

工具：Dell游匣G15、Windows10、记事本2021。

1、首先在电脑中新建一个文件夹（如：web-01），在该文件夹里新建一个html文件（如：index1.html）。

2、接着打开这个html文件，编写一个html的基本框架。

3、接着在头部<head>……</head>中加入插入背景图片的代码。不设置平铺方式的情况下是默认水平竖直都平铺。

4、若要不重复平铺，需要写入“background-repeat：no-repeat”此时，图片只显示一次。

5、编写完成之后，保存为html后缀，如下图所示就完成了。

欢迎分享，转载请注明来源：内存溢出

HTML5 给图片对象添加事件