canvas入门实例之鼠标跟随小球 

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5     <meta charset="UTF-8">
  6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8     <title>Document</title>
  9     <style>
 10         *{margin:0;padding:0;}
 11         canvas{border:1px solid #09f;box-shadow: 3px 3px 5px 3px #ccc;}
 12     </style>
 13 </head>
 14 <body>
 15     <canvas id="canvas" width="800" height="500">
 16     您的浏览器版本太低，请升级浏览器
 17     </canvas>
 18 </body>
 19 </html>
 20 <script>
 21 //获取canvas
 22 let canvas=document.getElementById("canvas");
 23 
 24 //若想绘制图形，还得创造一个绘图环境
 25 let ctx=canvas.getContext("2d");
 26 
 27 //首先得知道怎么画一个小球
 28 ctx.beginPath();//创建一个初始路径
 29 /*
 30 ctx.arc(x,y,r,beginR,endR,bol,true);
 31 x/y代表这个圆心的x/y轴坐标，r代表这个圆的半径,beginR/endR代表这个圆开始/结束的角度,bol代表顺时针还是逆时针，默认是true为顺时针。
 32 这里的坐标都是相对于画布的左上角来说的
 33 */
 34 ctx.arc(200,200,50,0,2*Math.PI);//1个π是180弧度
 35 ctx.stroke="red";//定义线条的颜色
 36 ctx.lineWidth=10;//设置线的宽度
 37 //ctx.stroke();//这是把定义好的路径画到画布上,画线的
 38 ctx.fillStyle="red";//把填充的颜色设置为红色
 39 ctx.fill();//默认填充图形的颜色是黑色
 40 
 41 //产生小球这个动作：我们用类来做
 42 let ary=[];//用来存储每次新产生的小球
 43 function Circle(x,y,r){
 44     this.x=x;//控制新产生小球的x轴位置
 45     this.y=y;//控制新产生小球的y轴位置
 46     this.r=r;//控制新产生小球的半径
 47     this.dx=10*Math.random()-5;
 48     this.dy=10*Math.random()-5;
 49     this.color=`rgb(${Math.floor(Math.random()*255)},${Math.floor(Math.random()*255)},${Math.floor(Math.random()*255)})`;//小球颜色随机产生
 50     ary.push(this);//把定义好的小球数据放到这个数组中
 51 }
 52 
 53 //render函数是把现有的数据渲染到画布上
 54 Circle.prototype.render=function () {
 55     ctx.beginPath();
 56     ctx.arc(this.x,this.y,this.r,0,2*Math.PI);
 57     ctx.fillStyle=this.color;
 58     ctx.fill();
 59 }
 60 //现在还需要一个让小球逐渐变小，而且位置还不断变化的函数
 61 Circle.prototype.update=function () {//位置的变化，控制x,y即可
 62     //this.x+=100*Math.random()-50;//写到此处会造成抖动，方向时正时负
 63     //this.y+=10*Math.random()-10;
 64     this.x += this.dx;
 65     this.y += this.dy;
 66     this.r--;//让小球的半径慢慢减小
 67     //这时我们需要注意，当小球半径减小到0时，需要把这个小球从数组当中移除
 68     if(this.r<=0){
 69         ary=ary.filter(item=>item!=this);//目的是为了把这个小球移除
 70         //ary=ary.filter(item=>item.r>0);//也可以这样写
 71         return false;
 72     }
 73     return true;
 74 }
 75 //接下来我们需要给canvas做鼠标滑过事件
 76 canvas.onmousemove=function (e){
 77     let cir = new Circle(e.clientX,e.clientY,40);
 78     //cir.render();//不是理想效果
 79     //cir.update();
 80     //需要做一个定时器执行
 81     /*
 82     setInterval(()=>{
 83         ctx.clearRect(0,0,800,500);//清空画布
 84         ary.forEach(item=>{
 85             item.update() && item.render();
 86             //item.render();
 87         });
 88     },10);
 89     */
 90 }
 91 let timer=null;
 92 canvas.onmouseenter=function () {
 93     draw();
 94 }
 95 /*
 96 canvas.ontouchmove=function (e) {
 97     e.preventdefault;//
 98     let cir = new Circle(e.touches[0].clientX,e.touches[0].clientY,40);
 99 }
100 canvas.ontouchstart=function (){
101     clearInterval(timer);
102     draw();
103 }
104 */
105 canvas.onmouseleave=function () {
106     ary.length==0?clearInterval(timer):null;
107     //clearInterval(timer);
108 }
109 function draw(){
110     timer=setInterval(()=>{
111         ctx.clearRect(0,0,800,500);//清空画布
112         ary.forEach(item=>{
113             item.update() && item.render();
114         });
115     },50);
116 }
117 </script>

 

posted @ 2018-10-14 18:40  龙波帝国  阅读(467)  评论(0)    收藏  举报