今天看啥
    热点:

      天发国际娱乐官网:军事专家在接受央视《今日关注》节目采访时表示,一级军士长是解放军士官中的最高级别,都是专业技术领域的达人。

      ES6与canvas实现鼠标小球跟随效果,es6canvas小球跟随


                     最近闲来无聊,看了下ES6的语法,结合canvas实现了动画特效——随着鼠标的移动,会有小球跟随且自动消失的动画

      首先,html部分,目前就一个canvas标签。

      1 <canvas id="canvas">
      2         当前浏览器不支持!
      3 </canvas>

      其次,css部分,没有考虑美观,大家喜欢的话,可以自己添加样式

      1 <style>
      2         body{
      3             margin: 90px;
      4         }
      5         #canvas{
      6             box-shadow: 0 0 5px;
      7         }
      8     </style>

      最后,看下js实现部分

       1 <script>
       2     const canvas = document.getElementById("canvas");
       3     canvas.height = 600;
       4     canvas.width = 1000;
       5     canvas.style.backgroundColor = "#000";
       6     const ctx = canvas.getContext("2d");
       7 
       8     //小球类
       9     class Ball{
      10         constructor(x, y, color){
      11             this.x = x;
      12             this.y = y;
      13             this.color = color;
      14             //小球半径默认40
      15             this.r = 40;
      16         }
      17         //绘制小球
      18         render(){
      19             ctx.save();
      20             ctx.beginPath();
      21             ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
      22             ctx.fillStyle = this.color;
      23             ctx.fill();
      24             ctx.restore();
      25         }
      26     }
      27     //移动小球
      28     class MoveBall extends Ball{
      29         constructor(x, y, color){
      30             super(x, y, color);
      31 
      32             this.dX = Math.floor(Math.random()*5+1);
      33             this.dY = Math.floor(Math.random()*5+1);
      34             this.dR = Math.floor(Math.random()*5+1);
      35         }
      36 
      37         upData(){
      38             this.x += this.dX;
      39             this.y += this.dY;
      40             this.r -= this.dR;
      41             if(this.r < 0){
      42                 this.r = 0;
      43             }
      44         }
      45     }
      46 
      47     let ballArry = [];
      48     let colorArry = ['red', 'green', 'pink', 'yellow', 'blue'];
      49 
      50     canvas.addEventListener("mousemove",function(e){
      51         ballArry.push(new MoveBall(e.offsetX, e.offsetY, colorArry[Math.floor(Math.random()*5)]));
      52     })
      53 
      54     setInterval(function(){
      55         ctx.clearRect(0, 0, canvas.width, canvas.height);
      56 
      57         for(let i=0;i<ballArry.length;i++){
      58             ballArry[i].render();
      59             ballArry[i].upData();
      60         }
      61     },50);
      62     </script>

      稍作解释下我的设计思路:

      首先,获取canvas对象,获取上下文,设置一些基本的属性。(canvas不做过多描述,具体的可以去w3自己研究)。然后,先定义一个Ball的类,里面有小球的圆心坐标位置,以及半径和颜色。在定义一个画小球的方法,具体的画圆实现,不懂的可以去canvas文档自己去看。

      在定义一个会变的小球类并继承Ball类。里面会有更新小球状态的方法,用来改变小球的半径以及颜色属相。

      最后,开启一个定时器,当鼠标移动时,把生成的小球存储到数组中,然后遍历循环读取小球,并改变小球的样式,达到最终的效果。

      最后附上完整代码。直接拷贝浏览器运行。

       1 <!DOCTYPE html>
       2 <html lang="en">
       3 <head>
       4     <meta charset="UTF-8">
       5     <title>会动的小球</title>
       6     <style>
       7         body{
       8             margin: 90px;
       9         }
      10         #canvas{
      11             box-shadow: 0 0 5px;
      12         }
      13     </style>
      14 </head>
      15 <body>
      16     <canvas id="canvas">
      17         当前浏览器不支持!
      18     </canvas>
      19     <script>
      20     const canvas = document.getElementById("canvas");
      21     canvas.height = 600;
      22     canvas.width = 1000;
      23     canvas.style.backgroundColor = "#000";
      24     const ctx = canvas.getContext("2d");
      25 
      26     //小球类
      27     class Ball{
      28         constructor(x, y, color){
      29             this.x = x;
      30             this.y = y;
      31             this.color = color;
      32             //小球半径默认40
      33             this.r = 40;
      34         }
      35         //绘制小球
      36         render(){
      37             ctx.save();
      38             ctx.beginPath();
      39             ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
      40             ctx.fillStyle = this.color;
      41             ctx.fill();
      42             ctx.restore();
      43         }
      44     }
      45     //移动小球
      46     class MoveBall extends Ball{
      47         constructor(x, y, color){
      48             super(x, y, color);
      49 
      50             this.dX = Math.floor(Math.random()*5+1);
      51             this.dY = Math.floor(Math.random()*5+1);
      52             this.dR = Math.floor(Math.random()*5+1);
      53         }
      54 
      55         upData(){
      56             this.x += this.dX;
      57             this.y += this.dY;
      58             this.r -= this.dR;
      59             if(this.r < 0){
      60                 this.r = 0;
      61             }
      62         }
      63     }
      64 
      65     let ballArry = [];
      66     let colorArry = ['red', 'green', 'pink', 'yellow', 'blue'];
      67 
      68     canvas.addEventListener("mousemove",function(e){
      69         ballArry.push(new MoveBall(e.offsetX, e.offsetY,         colorArry[Math.floor(Math.random()*5)]));
      70     })
      71 
      72     setInterval(function(){
      73         ctx.clearRect(0, 0, canvas.width, canvas.height);
      74 
      75         for(let i=0;i<ballArry.length;i++){
      76             ballArry[i].render();
      77             ballArry[i].upData();
      78         }
      79     },50);
      80     </script>
      81 </body>
      82 </html>        

       

      www.1click-soft.comtruehttp://www.1click-soft.com/HTML5/1303963.htmlTechArticleES6与canvas实现鼠标小球跟随效果,es6canvas小球跟随 最近闲来无聊,看了下 ES6 的语法,结合 canvas 实现了动画特效—— 随着鼠标的移动,会...

      相关文章

      相关搜索: html5

      帮客评论

      视觉看点
      百度 360 搜狗