DOM是Web前端领域非常重要的组成部分，不仅在处理HTML元素时会用到DOM，图形编程也同样会用到。比如SVG绘图，各种图形都是以DOM节点的形式插入到页面中，这就意味着可以使用DOM方法对图形进行 *** 作。比如有一个 元素，可以直接用jquery增加click事件$('#p1').click(function(){…})"。然而这种DOM处理方法在HTML5的Canvas里不再适用，Canvas使用的是另外一套机制，无论在Canvas上绘制多少图形，Canvas都是一个整体，图形本身实际都是Canvas的一部分，不可单独获取，所以也就无法直接给某个图形增加JavaScript事件。
Canvas的限制
在Canvas里，所有图形都绘制在帧上，绘制方法不会将绘制好的图形元素作为一个返回值输出，js也无法获取到已经绘制好的图形元素。比如：
代码如下:
cvs = document.getElementById('mycanvas')
ctx = canvas.getContext('2d')
theRect = ctx.rect(10, 10, 100, 100)
ctx.stroke()
console.log(theRect)//undefined
这段代码在canvas标签里绘制了一个矩形，首先可以看到绘制图形的rect方法没有返回值。如果打开浏览器的开发者工具，还可以看到canvas标签内部没有增加任何内容，而在js里获取到的canvas元素以及当前的上下文，也都没有任何表示新增图形的内容。
所以，前端常用的dom方法在canvas里是不适用的。比如点击上面Canvas里的矩形，实际点击的是整个Canvas元素。
给Canvas元素绑定事件
由于事件只能达到Canvas元素这一层，所以，如果想进一步深入，识别点击发生在Canvas内部的`哪一个图形上，就需要增加代码来进行处理。基本思路是：给Canvas元素绑定事件，当事件发生时，检查事件对象的位置，然后检查哪些图形覆盖了该位置。比如上面的例子里画过一个矩形，该矩形覆盖x轴10-110、y轴10-110的范围。只要鼠标点击在这个范围里，就可以视为点击了该矩形，也就可以手动触发矩形需要处理的点击事件。思路其实比较简单，但是实现起来还是稍微有点复杂。不仅要考虑这个判断过程的效率，有些地方还需要重新判断事件类型，设置要重新定义一个Canvas内部的捕获和冒泡机制。
首先要做的，是给Canvas元素绑定事件，比如Canvas内部某个图形要绑定点击事件，就需要通过Canvas元素代理该事件：
代码如下:
cvs = document.getElementById('mycanvas')
cvs.addEventListener('click', function(e){
//...
}, false)
接下来需要判断事件对象发生的位置，事件对象e的layerX和layerY属性表示Canvas内部坐标系中的坐标。但是这个属性Opera不支持，Safari也打算移除，所以要做一些兼容写法：
代码如下:
function getEventPosition(ev){
var x, y
if (ev.layerX || ev.layerX == 0) {
x = ev.layerX
y = ev.layerY
} else if (ev.offsetX || ev.offsetX == 0) { // Opera
x = ev.offsetX
y = ev.offsetY
}
return {x: x, y: y}
}
//注：使用上面这个函数，需要给Canvas元素的position设为absolute。
现在有了事件对象的坐标位置，下面就要判断Canvas里的图形，有哪些覆盖了这个坐标。
isPointInPath方法
Canvas的isPointInPath方法可以判断当前上下文的图形是否覆盖了某个坐标，比如：
代码如下:
cvs = document.getElementById('mycanvas')
ctx = canvas.getContext('2d')
ctx.rect(10, 10, 100, 100)
ctx.stroke()
ctx.isPointInPath(50, 50)//true
ctx.isPointInPath(5, 5)//false
接下来增加一个事件判断，就可以判断一个点击事件是否发生在矩形上：
代码如下:
cvs.addEventListener('click', function(e){
p = getEventPosition(e)
if(ctx.isPointInPath(p.x, p.y)){
//点击了矩形
}
}, false)
以上就是处理Canvas事件的基本方法，但是上面的代码还有局限，由于isPointInPath方法仅判断当前上下文环境中的路径，所以当Canvas里已经绘制了多个图形时，仅能以最后一个图形的上下文环境来判断事件，比如：
代码如下:
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
在使用 canvas 绘制图像时，canvas 画布左上角的坐标为(0, 0)
注意：canvas 画布大小不可通过 css 来改变，只能通过属性方式设置，否则可能出现失帧的情况（当使用 css 方式改变 canvas 画布大小时，只是 cavas 标签的大小改变了，正真的绘图区域大小并没有改变，所以出现了失帧的情况）。
示例：
示例：
示例：
示例：
示例：
示例：
示例：
1）参数说明：
参数 x：矩形左上角的 x 坐标。
参数 y：矩形左上角的 y 坐标。
参数 width：矩形的宽度，以像素计。
参数 height：矩形的高度，以像素计。
2） 注意事项：
context.rect(x, y, width, height)只是创建了矩形，并没有绘制出来。因此，创建完成后需使用 context.stroke()来绘制。
3）示例：
1）参数说明：
参数 x：矩形左上角的 x 坐标。
参数 y：矩形左上角的 y 坐标。
参数 width：矩形的宽度，以像素计。
参数 height：矩形的高度，以像素计。
2）默认的填充颜色是黑色。可以使用 fillStyle 属性来设置用于填充绘图的颜色、渐变或模式。
3）示例：
1）参数说明：
参数 x：矩形左上角的 x 坐标。
参数 y：矩形左上角的 y 坐标。
参数 width：矩形的宽度，以像素计。
参数 height：矩形的高度，以像素计。
2）笔触的默认颜色是黑色。
3）可以使用 strokeStyle 属性来设置笔触的颜色、渐变或模式。
4）示例：
1）参数说明：
参数 x：要清除的矩形左上角的 x 坐标。
参数 y：要清除的矩形左上角的 y 坐标。
参数 width：要清除的矩形的宽度，以像素计。
参数 height：要清除的矩形的高度，以像素计。
小技巧：
当 x = 0，y = 0，width = canvas.width，height = canvas.height 时，则可以清除画布上的矩形
2）示例：
1）参数说明：
参数 x：圆中心的 x 坐标。
参数 y：圆中心的 y 坐标。
参数 r：圆的半径。
参数 sAngle：起始角弧度（圆的三点钟位置是0度）。
参数 eAngle：结束角弧度（圆的三点钟位置是0度）。
参数 counterclockwise：规定逆时针还是顺时针绘图。f'alse = 顺时针，true = 逆时针。
2） 角度和弧度的关系：角度/弧度 = 180/pi
3）创建完圆弧后需使用 context.stroke()绘制创建的圆弧。
4）示例：绘制一个圆
5）示例：绘制圆上任意一点
圆上任意一点坐标：x = ox + r*cos(弧度)，y = oy + r*cos(弧度)
ox：圆心的 x 坐标。
oy：圆心的 y 坐标。
r：圆的半径。
2）设置字体水平对齐方式
2）设置字体垂直对齐方式
textBaseline 属性在不同的浏览器上效果不同，特别是使用 "hanging" 或 "ideographic" 时。
3）设置文字阴影效果
1）参数说明：
参数 text：文本内容
参数 x：开始绘制文本的 x 坐标位置（相对于画布）。
参数 y：开始绘制文本的 y 坐标位置（相对于画布）。
2）默认的填充颜色是黑色。可以使用 fillStyle 属性来设置用于填充绘图的颜色、渐变或模式。
3）示例：
1）参数说明：
参数 text：文本内容
参数 x：开始绘制文本的 x 坐标位置（相对于画布）。
参数 y：开始绘制文本的 y 坐标位置（相对于画布）。
2）默认的笔触颜色是黑色。可以使用 strokeStyle 属性来设置笔触的颜色、渐变或模式。
3）示例：
1）参数说明：
参数 img：规定要使用的图像。
参数 x：在画布上放置图像的 x 坐标位置。
参数 y：在画布上放置图像的 y 坐标位置。
2）当图像的大小超出画布的大小时，超出的部分将不会被显示出来。
3）示例：
1）参数说明：
参数 img：规定要使用的图像。
参数 x：在画布上放置图像的 x 坐标位置。
参数 y：在画布上放置图像的 y 坐标位置。
参数 width：要使用的图像的宽度（伸展或缩小图像）。
参数 height：要使用的图像的高度（伸展或缩小图像）。
2）因保持 width/height = img.width/img.height，否则绘制后的图片会失帧。
3）示例：
1）参数说明：
参数 img：规定要使用的图像。
参数 sx：从图像的 sx 坐标位置开始剪切。
参数 sy：从图像的 sy 坐标位置开始剪切。
参数 swidth：剪切的宽度。
参数 sheight：剪切的高度。
参数 x：在画布上放置图像的 x 坐标位置。
参数 y：在画布上放置图像的 y 坐标位置。
参数 width：要使用的图像的宽度（伸展或缩小图像）。
参数 height：要使用的图像的高度（伸展或缩小图像）。
2）因保持 width/height = swidth/sheight，否则绘制后的图片会失帧。
3）示例：
stop：介于 0.0 与 1.0 之间的值，表示渐变中开始(0.0)与结束(1.0)之间的位置。
color：颜色。
示例：
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）