web前端入门（三）-canvas添加事件响应

软件硬化工程师

于 2020-03-11 10:40:06 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端开发文章标签： html canvas js

本文链接：https://blog.youkuaiyun.com/mrbbcool/article/details/104789622

本文介绍如何在HTML的canvas元素上添加事件响应，如mousedown和mousemove。虽然canvas本身能捕捉事件，但无法直接监听绘制的图形。通过在canvas事件处理函数中检测鼠标位置与图形的关系，来实现对图形的操作，例如在绘制的圆形上实现点击交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html 中添加 canvas 元素后，可以给 canvas 元素添加 mousedown、mousemove等等事件响应函数，从而处理 canvas 事件。
然而，在 canvas 中绘制图形后，无法单独监听各图形的事件，只能在 canvas 事件响应函数中，判断鼠标是否在绘制的图形内，从而对各图形执行相应的事件操作。
1.绘制圆形

function drawArc(x,y) {
 	canvas=document.getElementById("id");
 	ctx = canvas.getContext('2d');
    ctx.save();//保存初始坐标状态
    ctx.translate(x,y);//坐标转移
    ctx.moveTo(0,0);
    ctx.arc(0,0,r,0,Math.PI*2);//绘制圆形，起始角度为0，终止角度为2*PI
    ctx.restore();//恢复初始坐标状态
    ctx.fillStyle="#FF0000";//填充颜色
    ctx.fill();//填充
}

2.给 canvas 添加鼠标点击事件，计算鼠标在canvas内的坐标，判断是否点击在绘制的图形内

$("#canvasId").mousedown(function(){
	/*通过重绘来判断鼠标是否点击在绘制的圆形内*/
	var ctx=canvas.getContext('2d');
    ctx.clearRect(0,0,canvas.width,canvas.height);//清除canvas区域
    drawArc(x,y);//重绘图形
    var mouseX=e.clientX-$canvas.offset().left;//计算鼠标点击点在 canvas 内的x坐标
    var mouseY=e.clientY-$canvas.offset()