canvas绑定事件

最新推荐文章于 2023-08-29 17:10:54 发布

kongjunchao159

最新推荐文章于 2023-08-29 17:10:54 发布

阅读量2k

点赞数

分类专栏： canvas

本文链接：https://blog.csdn.net/kongjunchao159/article/details/47318155

版权

canvas 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin:0; padding:0;}
body{width:100%; height:100%;}
#canvas{background-color:#CCC;}
</style>
</head>
<body>
<canvas id="canvas" width="300" height="300">你的浏览器不支持canvas</canvas>
<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
if(context){
   var obj = [];
   var Circle = function(){
       this.type = "circle";
       this.x = 0;
       this.y = 0;
       this.radius = 0;
       this.color = "red";
       this.isHover = false;
   };
   var Draw = function(){
       context.clearRect(0,0,canvas.width,canvas.height);
       for(var i=0;i<obj.length;i++){
           if(obj[i].type = "circle"){
               context.beginPath();
               context.lineWidth = 1;
               context.strokeStyle = obj[i].color;
               context.arc(obj[i].x,obj[i].y,obj[i].radius,0,2*Math.PI,false);
               context.stroke();
               context.closePath();
           }
       }
   };
}

//绘制100个圆圈
for(var i=0;i<100;i++){
   var c = new Circle();
   c.x = Math.random()*300;
   c.y = Math.random()*300;
   c.radius = 5;
   c.hover = function(){
       this.color = "black";
       Draw();
   }
   c.out = function(){
       this.color = "red";
       Draw();
   }
   //点击事件
//   c.isClick = function(){
//       alert("");
//   }
   obj.push(c);
}

Draw();

//鼠标移上去改变圆圈颜色，触发点击事件可改为onclick
canvas.onmousemove = function(e){
   for(var i=0;i<obj.length;i++){
       var c = obj[i];
       //client是相对于浏览器的坐标，如要获取相对于父元素即canvas画布，可以替换成e.offsetX和e.offsetY获取坐标
       if((e.clientX-c.x)*(e.clientX-c.x)+(e.clientY-c.y)*(e.clientY-c.y)<=c.radius*c.radius){
           c.isHover = true;
           c.hover && c.hover();
       }else{
           if(c.isHover){
               c.isHover = false;
               c.out && c.out();
           }
       }
   }
}

</script>
</body>
</html>

kongjunchao159

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas绑定事件

*{margin:0; padding:0;}body{width:100%; height:100%;}#canvas{background-color:#CCC;}你的浏览器不支持canvasvar canvas = document.getElementById('canvas');var context = canvas.getContext('2d')
复制链接

扫一扫