DOM是Web前端领域非常重要的组成部分，不仅在处理HTML元素时会用到DOM，图形编程也同样会用到。比如SVG绘图，各种图形都是以DOM节点的形式插入到页面中，这就意味着可以使用DOM方法对图形进行 *** 作。比如有一个 元素，可以直接用jquery增加click事件$('#p1')click(function(){…})"。然而这种DOM处理方法在HTML5的Canvas里不再适用，Canvas使用的是另外一套机制，无论在Canvas上绘制多少图形，Canvas都是一个整体，图形本身实际都是Canvas的一部分，不可单独获取，所以也就无法直接给某个图形增加JavaScript事件。
Canvas的限制
在Canvas里，所有图形都绘制在帧上，绘制方法不会将绘制好的图形元素作为一个返回值输出，js也无法获取到已经绘制好的图形元素。比如：
代码如下:
cvs = documentgetElementById('mycanvas');
ctx = canvasgetContext('2d');
theRect = ctxrect(10, 10, 100, 100);
ctxstroke();
consolelog(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 = documentgetElementById('mycanvas');
cvsaddEventListener('click', function(e){
//
}, false);
接下来需要判断事件对象发生的位置，事件对象e的layerX和layerY属性表示Canvas内部坐标系中的坐标。但是这个属性Opera不支持，Safari也打算移除，所以要做一些兼容写法：
代码如下:
function getEventPosition(ev){
var x, y;
if (evlayerX || evlayerX == 0) {
x = evlayerX;
y = evlayerY;
} else if (evoffsetX || evoffsetX == 0) { // Opera
x = evoffsetX;
y = evoffsetY;
}
return {x: x, y: y};
}
//注：使用上面这个函数，需要给Canvas元素的position设为absolute。
现在有了事件对象的坐标位置，下面就要判断Canvas里的图形，有哪些覆盖了这个坐标。
isPointInPath方法
Canvas的isPointInPath方法可以判断当前上下文的图形是否覆盖了某个坐标，比如：
代码如下:
cvs = documentgetElementById('mycanvas');
ctx = canvasgetContext('2d');
ctxrect(10, 10, 100, 100);
ctxstroke();
ctxisPointInPath(50, 50); //true
ctxisPointInPath(5, 5); //false
接下来增加一个事件判断，就可以判断一个点击事件是否发生在矩形上：
代码如下:
cvsaddEventListener('click', function(e){
p = getEventPosition(e);
if(ctxisPointInPath(px, py)){
//点击了矩形
}
}, false);
以上就是处理Canvas事件的基本方法，但是上面的代码还有局限，由于isPointInPath方法仅判断当前上下文环境中的路径，所以当Canvas里已经绘制了多个图形时，仅能以最后一个图形的上下文环境来判断事件，比如：
代码如下:
饼图的话，每一部分都是扇形。
if(点到圆心的距离<圆的半径&&点到圆心的直线的角度>扇形的起始角度&&点到圆心的直线的角度<扇形的结束角度){
点在扇形区域内
}
或者自己百度一下，如何判断点在扇形区域内。
以下程序实现了在canvas上画红色的圆，圆心为鼠标所在位置，其中圆的位置随着鼠标位置的移动而移动，js代码中mousePos(e)方法用于获取鼠标在整个页面的坐标，getCanvasPos(canvas,e)方法用于获取鼠标在canvas上的坐标；canvas以其左上角为起点，并设为(0,0)，因此当页面包含其他元素的时候，两者坐标不一致，不过在本例中两者坐标是一致的，因为页面只包含一个canvas元素：
html代码如下：
[html] view plain copy
<html>
<head></head>
<body>
<div onmousemove="draw(event)" id="testcanvas">
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;" >
Your browser does not support the canvas element
</canvas>
<script type="text/javascript" src="abcjs">
</script>
</div>
</body>
</html>
其中abcjs文件中的代码如下：
[javascript] view plain copy
function mousePos(e)
{//获取鼠标所在位置的坐标，相对于整个页面
var x,y;
var e = e||windowevent;
return {
x:eclientX+documentbodyscrollLeft + documentdocumentElementscrollLeft,
y:eclientY+documentbodyscrollTop + documentdocumentElementscrollTop
};
}
function getCanvasPos(canvas,e)
{//获取鼠标在canvas上的坐标
var rect = canvasgetBoundingClientRect();
return {
x: eclientX - rectleft (canvaswidth / rectwidth),
y: eclientY - recttop (canvasheight / rectheight)
};
}
function draw(e)
{
var c=documentgetElementById("myCanvas");
var cxt=cgetContext("2d");
cxtclearRect(0,0,cwidth,cheight);
cxtfillStyle="#FF0000";
cxtbeginPath();
//cxtarc(mousePos(e)x,mousePos(e)y,15,0,MathPI2,true);
cxtarc(getCanvasPos(c,e)x,getCanvasPos(c,e)y,15,0,MathPI2,true);
cxtclosePath();
cxtfill();
}
import javaawt;
import javaxswingJFrame;
import javaxswingJLabel;
import javaxswingSwingConstants;
import javaxswingWindowConstants;
import javaxswingborder;
public class jframe {
/
@param args
/
public void CreateJFrame(String title) {
JFrame jf = new JFrame(title);
Container container = jfgetContentPane();
JLabel jl = new JLabel("");
jlsetHorizontalAlignment(SwingConstantsCENTER);
containeradd(jl);
containersetBackground(Colorwhite);
jfsetVisible(true);
jfsetSize(200, 150);
jfsetDefaultCloseOperation(WindowConstantsEXIT_ON_CLOSE);
};
以上就是关于HTML5中Canvas的事件处理介绍全部的内容，包括:HTML5中Canvas的事件处理介绍、canvas饼图 怎样获取各区域坐标范围、怎么获取 canvas 上鼠标的坐标等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）