人比较懒,聊天的时候废话连篇,写文章的时候就懒了..就简单说一下思路,不会的同学看下思路,不怕我误人子弟就行...会的同学欢迎多多拍砖,每一个砖头都是进步的垫脚石,不胜感激!
起因:
在csdn上一个朋友提问,用什么办法检测canvas上面显示对象的hover方法,记录在本博客的"论坛回帖随手写"分类下面了,有兴趣的同学可以看下。
当时写的时候,只是以实现为目的,没有扩展性,不通用,于是就想些一个通用一点的来着。
但是碍于时间问题,一直拖着,兴许拖着拖着就忘了也未可知。
正好公司决策层改变主意,正在进行的项目有些变更,闲下来就简单实现了个canvas的动画效果和鼠标点击事件的监听。
原理:
[动画]:其实就是使用定时器,window对象的setInterval方法来实现动画,做过flash ActionScript编程的同学可能比较熟悉。
[鼠标事件]:简陋的模型来说鼠标事件其实就是判断鼠标点击在canvas上的位置,然后检测一下点击位置是否在图形区域之内,hover事件则用mousemove事件来实现,当然也可以在setInterval的循环中实现。事件代理,我习惯直接加在canvas上,看有不少同学是在canvas上做了一个div来代理,不清楚其中的好处,有明白的同学也多多指点。
至于多图形遮盖的效果,在之前的那个hover事件监听中有实现。
至于子对象列表、事件冒泡之类的,等过阵闲下来再更新吧。但愿不是遥遥无期...
代码在下面:
有个地方的this是thisthis,是因为论坛的代码格式化有问题,不是写的问题,复制之后请自行修改再运行。在一次点击事件触发后一段时间内不能再触发点击事件是因为alert阻塞线程,但是setInterval仍然会继续执行导致,改成console.log就可以正常打印,并非bug。
that's all.
<!doctype html>
<html>
<meta charset="utf-8">
<head>
<title>canvas形状事件代理测试</title>
<style>
html,body{margin:0; padding:0;}
</style>
</head>
<body>
<canvas id="cvs" width="500" height="500" style="border:1px solid #333;">狗日的ie..</canvas>
<script type="text/javascript">
// point 类
var CPoint = function(x,y){
this.x = x;
this.y = y;
}
CPoint.prototype = {
getType:function(){
return 'point';
},
hitTestPoint:function(p){
return p.x == this.x && p.y == this.y;
},
toString:function(){
return '[object CPoint]';
}
};
// circle 类
var CCircle = function(radius){
this.x = this.y = 0;
this.radius = radius;
}
CCircle.prototype = {
getType:function(){
return 'circle';
},
hitTestPoint:function(p){
return (this.x - p.x) * (this.x - p.x) + (this.y - p.y)*(this.y - p.y) <= this.radius * this.radius;
},
toString:function(){
return '[object CCircle]';
}
}
// rectangle 类
var CRectangle = function(width,height){
this.x = this.y = 0;
this.width = width;
this.height = height;
}
CRectangle.prototype = {
getType:function(){
return 'rectangle';
},
hitTestPoint:function(p){
return p.x > (this.x-this.width/2) && p.x < (this.x + this.width/2) && p.y > (this.y-this.height/2) && p.y < (this.y + this.height/2);
},
toString:function(){
return '[object CRectangle]';
}
}
// 设置root对象
var root = [];
root.addChild = function (s){
this.push(s);
}
root.start = function (){
this.timer = setInterval(function(){
UpdateCtx(root.ctx);
root.onEnterFrame && root.onEnterFrame();
},25);
}
root.stop = function (){
clearInterval(this.timer);
}
root.toString = function (){
return '[object root]';
}
// 绘制对象方法
function DrawShapeOnCtx(ctx,s){
ctx.beginPath();
ctx.lineWidth = 2;
ctx.strokeStyle = '#333'
switch(s.getType()){
case 'circle':
ctx.arc(s.x,s.y,s.radius,0,Math.PI*2,false);
break;
case 'rectangle':
ctx.strokeRect(s.x - s.width/2,s.y-s.height/2,s.width,s.height);
break;
}
ctx.stroke();
ctx.closePath();
}
// 更新canvas方法
function UpdateCtx (ctx){
ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
for(var i=root.length-1;i>-1;i--)
DrawShapeOnCtx(ctx,root[i]);
}
// 用户自定义部分开始
var c = new CCircle(20);;
c.x = 100;
c.y = 100;
var r = new CRectangle(100,20);
r.x = 100;
r.y = 300;
root.addChild(c);
root.addChild(r);
root.ctx = document.getElementById('cvs').getContext('2d');
root.onEnterFrame = function (){
c.x += 5;
if(c.x > root.ctx.canvas.width-c.radius){
c.x = -c.radius;
}
}
root.start();
root.ctx.canvas.onclick = function(e){
var p = new CPoint(e.clientX,e.clientY);
if(r.hitTestPoint(p) || c.hitTestPoint(p)){
alert('You have clicked the shape!');
};
}
</script>
</body>
</html>
分享到:
相关推荐
ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-...
一款炫酷的html5 canvas鼠标圆点粒子交互式动画特效,可自定义设置粒子数量和大小颜色等,点击或移动鼠标进行交互。
css3实现图片模糊,canvas实现交互设计,简单,简单,简单,简单,简单,简单单
4.8_使用HTML控件和canvas交互|交互绘制的处理和完善|canvas项目综合实战|Canvas图形、动画、游戏开发从入
HTML5结合Canvas实现的霓虹灯蜂巢交互发光特效源码.zip
html5 canvas交互式数据图表插件代码 html5 canvas交互式数据图表插件代码
H5 Canvas鼠标粒子交互式特效是一款自定义设置粒子数量和大小颜色等功能,点击粒子波动画特效。
将AutoCAD软件生成的DXF文件通过VS建立WPF工程,实现将AutoCAD软件中生成的工件图在WPF的Canvas中画出来,并实现一定的功能。
基于canvas的鼠标绘制矩形框的demo,多个canvas对象下支持选中,平移,删除操作,代码用VUE实现的
3.7_canvas和鼠标交互|离屏Canvas图像处理|Canvas图形、动画、游戏开发从入门到精通全系列课程
使用js+canvas绘图,结合svg图形,实现标尺栏和网格效果。
HTML5 Canvas实现的交互式分形树水墨画动画效果源码
html5 canvas画布实现液体波浪动画效果 html5 canvas画布实现液体波浪动画效果
鼠标在canvas上移动,显示鼠标位置
本文详细介绍了Canvas元素的实现和应用,包括绘画、图象处理、动画渲染等功能,并介绍了Canvas元素在实现过程中的关键技术和思路。 画图板设计和实现: 基于Canvas元素,实现了一个类似Windows画图板的应用,包含...
基于Java AWT、SpringBoot、websocket、canvas的跨平台远程桌面实现,目前支持远程桌面控制,剪切板共享、文件传输等。
Konva是一个基于 Canvas 开发的 2d JavaScript框架库, 它可以轻松的实现桌面应用和移动应用中的图形交互交互效果. Konva 可以实现高性能动画, 过渡, 节点嵌套, 局部操作, 滤镜, 缓存, 事件等功能, 不仅仅适用于...
H5 canvas 实现小游戏 H5 canvas 实现小游戏 H5 canvas 实现小游戏 H5 canvas 实现小游戏
原生JavaScript+canvas实现图片裁剪功能,介绍css属性clip
4.4_屏幕坐标和canvas坐标的转换|使用鼠标和canvas交互|canvas项目综合实战|Canvas图形、动画、游戏开发