一个canvas 事件demo
来源:互联网 发布:淘宝怎么关闭私人定制 编辑:程序博客网 时间:2024/05/17 09:30
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript">
var list=[];
var currentC;
var _e={};
var cricle = function(x,y,r){
this.x=x;
this.y=y;
this.r=r;
this.isCurrent=false;
this.drawC=function(ctx,x,y){
ctx.save();
ctx.beginPath();
ctx.moveTo(this.x,this.y-this.r);
ctx.arc(this.x,this.y,this.r,2*Math.PI,0,true);
if ((x && y && ctx.isPointInPath(x, y) && !currentC )||this.isCurrent) {
ctx.fillStyle = '#ff0000';
currentC=this;
this.isCurrent=true;
}else{
ctx.fillStyle = '#999999';
}
ctx.fill();
}
}
function draw(){
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
for(var i=0;i<10;i++){
var c=new cricle(20*i,20*i,5*i);
c.drawC(ctx);
list.push(c);
}
}
}
function reDraw(e){
e=e||event;
var canvas = document.getElementById('tutorial');
var x = e.clientX - canvas.offsetLeft;
var y = e.clientY - canvas.offsetTop;
canvas.width = canvas.width;
if (canvas.getContext){
var ctx = canvas.getContext('2d');
for(var i=0;i<list.length;i++){
var c=list[i];
c.drawC(ctx,x,y);
}
}
}
function show(e){
e=e||event;
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
var x = e.clientX - canvas.offsetLeft;
var y = e.clientY - canvas.offsetTop;
if(currentC){
currentC.x=parseInt(x+(x-currentC.x)/5);
currentC.y=parseInt(y+(y-currentC.y)/5);
}
_e=e;
}
window.onload=function(){
var canvas = document.getElementById('tutorial');
draw();
canvas.onmousedown=function(e){
e=e||event;
var x = e.clientX - canvas.offsetLeft;
var y = e.clientY - canvas.offsetTop;
if(currentC)
currentC.isCurrent=false;
currentC=null;
reDraw(e);
_e=e;
var showTimer=setInterval(function(e){
reDraw(e);
},10,_e);
canvas.onmousemove=show;
document.onmouseup=function(){
if(currentC)
currentC.isCurrent=false;
currentC=null;
canvas.onmousemove=null;
clearInterval(showTimer);
}
}
}
</script>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
</head>
<body style="background:#eeeeee;">
<div style="background:#0f0;width:100px;height:100px;position:absolute;left:100px;top:100px;z-index:1;" onclick="alert(1);"></div>
<canvas id="tutorial" width="1000" height="550" style="z-index:100;display:block;position:absolute;"></canvas>
</body>
<script>
</script>
</html>
- 一个canvas 事件demo
- canvas实现一个解锁demo
- canvas demo之 画一个星星
- 一个canvas demo, 用到了三个canvas标签
- canvas demo
- 分享一个在canvas中的点击事件
- Canvas---Canvas事件处理、Canvas元素的鼠标点击事件处理、实现一个元素管理器
- 基于 canvas 实现的一个截图小 demo
- 一个android事件分发的简单Demo
- canvas 事件
- 根据jquery自定义事件写一个事件订阅派发demo
- uGUI两个Canvas其中一个不响应鼠标事件
- 一个不错的HTML5 Canvas多层点击事件监听实例
- html canvas demo
- canvas 画图板Demo
- canvas画钟表demo
- canvas 时钟demo
- canvas demo以及小结
- android -- 蓝牙 bluetooth (二) 打开蓝牙
- PDB文件:每个开发人员都必须知道的
- debian 安装ruby +nginx+apache开发环境.
- Android Activity 生命周期的透彻理解
- The installer encountered an error copying files to the hard disk: [Errno 5] Input/output error
- 一个canvas 事件demo
- 《编程珠玑》---找到缺失的整数(位图+二分)
- activity生命周期的onPause和onStop
- scala akka 修炼之路1(使用actor实现一个job的并发计算和task失败重启)
- 使用TOAD工具INSERT STATEMENTS方式导入导出表
- 跨越语言界线,微软将推出实时语音翻译「Skype Translator」
- 2014百度之星初赛第一轮解题报告:information
- android apk反编译
- 处理浏览器后退问题 和 监听组合键问题