实际上,拿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
}
}
}
需要准备的材料有:电脑,浏览器,HTML编辑器。
1、首先,打开HTML编辑器并创建一个新的HTML文件,比如index。html,写出的基本问题代码。
2、 在<button>标签的索引。style="background: url(small2.png)宽度:150 px高度:60px "。
3、当浏览器运行索引时。HTML页面中,按钮成功添加了图像。
需要准备的材料分别有:电脑、浏览器、html编辑器。
1、首先,打开html编辑器,新建html文件,例如:index.html,编写问题基础代码。
2、在index.html中的<button>标签中,加入样式代码:style="background: url(small2.png)width:150pxheight:60px"。
3、浏览器运行index.html页面,此时按钮被成功添加了图片。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)