14、canvas标签之事件

来源：互联网发布：js检验只能输入数字编辑：程序博客网时间：2024/06/01 09:57

事件
isPointInPath(x,y)
如果指定的点位于当前路径中，返回布尔值
只能判断最后绘制出来的图片

<!doctype html><!--声明当前文档为html文档--><html lang="en"><!--语言为英语--><head><!--头部--><meta charset="UTF-8"><!--字符编码：utf-8国际编码  gb2312中文编码--><meta name="Keywords" content="关键词"><meta name="Description" content="描述"><title>Document</title><style>/*css样式表的衣柜*/canvas{background:#cc99cc;}</style></head><body><!--身体--><canvas width="500" height="500" id="can">您的浏览器不支持canvas标签，请您更换浏览器！！</canvas><img src="" id="img"><script>/*事件isPointInPath(x,y) 如果指定的点位于当前路径中，返回布尔值只能判断最后绘制出来的图片*/var img = document.getElementById("img");var can = document.getElementById("can");var cxt = can.getContext("2d");can.onmousedown = function(ev){var ev = ev || window.event;var point = {//获取鼠标位置x : ev.clientX-can.offsetLeft,y : ev.clientY-can.offsetTop}obj1.draw(point);//只能判断最后绘制出来的图片,因此每次点击后需要重绘图片obj2.draw(point);}function Obj(x,y){this.x = x;this.y = y;cxt.beginPath();cxt.arc(this.x,this.y,50,0,360,false);cxt.closePath();cxt.fill();}var obj1 = new Obj(100,100);var obj2 = new Obj(200,200);Obj.prototype.draw = function(point){cxt.beginPath();cxt.arc(this.x,this.y,50,0,360,false);cxt.closePath();cxt.fill();if (cxt.isPointInPath(point.x,point.y)){this.sdas();//新加的一个功能}}obj1.sdas = function(){alert(1);}obj2.sdas = function(){alert(2);}</script></body></html>

0 0