一个canvas 事件demo

最新推荐文章于 2021-06-05 01:55:54 发布

原创最新推荐文章于 2021-06-05 01:55:54 发布 · 794 阅读

CC 4.0 BY-SA版权

本文介绍了一个使用HTML5 Canvas实现的交互式圆形绘制案例，通过鼠标操作可以在画布上选择并拖动不同大小的圆圈，实现了基本的选中与移动功能。

<!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>