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

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

 <canvas id="canvas">

         当前浏览器不支持！

 </canvas>

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

 <style>

         body{

             margin: 90px;

         }

         #canvas{

             box-shadow: 0 0 5px;

         }

     </style>

最后，看下js实现部分

 <script>

     const canvas = document.getElementById("canvas");

     canvas.height = 600;

     canvas.width = 1000;

     canvas.style.backgroundColor = "#000";

     const ctx = canvas.getContext("2d");

     //小球类

     class Ball{

         constructor(x, y, color){

             this.x = x;

             this.y = y;

             this.color = color;

             //小球半径默认40

             this.r = 40;

         }

         //绘制小球

         render(){

             ctx.save();

             ctx.beginPath();

             ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);

             ctx.fillStyle = this.color;

             ctx.fill();

             ctx.restore();

         }

     }

     //移动小球

     class MoveBall extends Ball{

         constructor(x, y, color){

             super(x, y, color);

             this.dX = Math.floor(Math.random()*5+1);

             this.dY = Math.floor(Math.random()*5+1);

             this.dR = Math.floor(Math.random()*5+1);

         }

         upData(){

             this.x += this.dX;

             this.y += this.dY;

             this.r -= this.dR;

             if(this.r < 0){

                 this.r = 0;

             }

         }

     }

     let ballArry = [];

     let colorArry = ['red', 'green', 'pink', 'yellow', 'blue'];

     canvas.addEventListener("mousemove",function(e){

         ballArry.push(new MoveBall(e.offsetX, e.offsetY, colorArry[Math.floor(Math.random()*5)]));

     })

     setInterval(function(){

         ctx.clearRect(0, 0, canvas.width, canvas.height);

         for(let i=0;i<ballArry.length;i++){

             ballArry[i].render();

             ballArry[i].upData();

         }

     },50);

     </script>

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

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

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

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

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

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>会动的小球</title>

     <style>

         body{

             margin: 90px;

         }

         #canvas{

             box-shadow: 0 0 5px;

         }

     </style>

 </head>

 <body>

     <canvas id="canvas">

         当前浏览器不支持！

     </canvas>

     <script>

     const canvas = document.getElementById("canvas");

     canvas.height = 600;

     canvas.width = 1000;

     canvas.style.backgroundColor = "#000";

     const ctx = canvas.getContext("2d");

     //小球类

     class Ball{

         constructor(x, y, color){

             this.x = x;

             this.y = y;

             this.color = color;

             //小球半径默认40

             this.r = 40;

         }

         //绘制小球

         render(){

             ctx.save();

             ctx.beginPath();

             ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);

             ctx.fillStyle = this.color;

             ctx.fill();

             ctx.restore();

         }

     }

     //移动小球

     class MoveBall extends Ball{

         constructor(x, y, color){

             super(x, y, color);

             this.dX = Math.floor(Math.random()*5+1);

             this.dY = Math.floor(Math.random()*5+1);

             this.dR = Math.floor(Math.random()*5+1);

         }

         upData(){

             this.x += this.dX;

             this.y += this.dY;

             this.r -= this.dR;

             if(this.r < 0){

                 this.r = 0;

             }

         }

     }

     let ballArry = [];

     let colorArry = ['red', 'green', 'pink', 'yellow', 'blue'];

     canvas.addEventListener("mousemove",function(e){

         ballArry.push(new MoveBall(e.offsetX, e.offsetY,         colorArry[Math.floor(Math.random()*5)]));

     })

     setInterval(function(){

         ctx.clearRect(0, 0, canvas.width, canvas.height);

         for(let i=0;i<ballArry.length;i++){

             ballArry[i].render();

             ballArry[i].upData();

         }

     },50);

     </script>

 </body>

 </html>

ES6与canvas实现鼠标小球跟随效果的更多相关文章

  1. canvas动态小球重叠效果

    前面的话 在javascript运动系列中,详细介绍了各种运动,其中就包括碰壁运动.但是,如果用canvas去实现,却是另一种思路.本文将详细介绍canvas动态小球重叠效果 效果展示 静态小球 首先 ...

  2. 【js】鼠标跟随效果

    1.实现思想 ①鼠标跟随效果,发生在鼠标移动的时候,故需要使用onmousemove事件 ②当页面内容多于1屏时,就需要考虑滚动距离的问题 ③想实现鼠标跟随的效果需要: 元素的left位置 = 鼠标当 ...

  3. banner 跟随鼠标呈现视差效果

    参考 Element 官网,利用 js / jq 和 css3, 实现某图片随着鼠标移动呈现的视差效果. <!DOCTYPE html> <html> <head> ...

  4. Canvas 动态小球重叠效果

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  5. 用HTML5 Canvas 做擦除及扩散效果

    2013年的时候曾经使用canvas实现了一个擦除效果的需求,即模拟用户在模糊的玻璃上擦除水雾看到清晰景色的交互效果.好在2012年的时候学习HTML5的时候研究过canvas了,所以在比较短的时间内 ...

  6. （canvas）两小球碰撞后的速度问题研究

    这两天在研究canvas碰撞 先把小球开始运动的图拿出来 参考了一下别的的代码,在两个小球碰撞处理上,我觉得不完善 怎么样处理才算完善呢,当然是要用高中物理学的动量守恒了和机械能守恒了 机械能守恒我其 ...

  7. day19—纯CSS实现菜单列表下框跟随效果

    转行学开发,代码100天——2018-04-04 今天看到一篇介绍利用CSS实现列表下跟随效果的设计文章,如下图,当鼠标滑过列表项时,要求该项内容下的黑色下边框线实现同方向的跟随移动. 其中,列表内容 ...

  8. vue+canvas实现炫酷时钟效果的倒计时插件（已发布到npm的vue2插件，开箱即用）

    前言: 此事例是在vue组件中,使用canvas实现倒计时动画的效果.其实,实现效果的逻辑跟vue没有关系,只要读懂canvas如何实现效果的这部分逻辑就可以了 canvas动画的原理:利用定时器,给 ...

  9. HTML5在canvas中绘制复杂形状附效果截图

    HTML5在canvas中绘制复杂形状附效果截图 一.绘制复杂形状或路径 在简单的矩形不能满足需求的情况下,绘图环境提供了如下方法来绘制复杂的形状或路径. beginPath() : 开始绘制一个新路 ...

随机推荐

  1. C++ STL之min_element()与max_element（）（取容器中的最大最小值）

    min_element()和max_element 头文件:#include<algorithm> 作用:返回容器中最小值和最大值.max_element(first,end,cmp);其 ...

  2. BZOJ 1088: [SCOI2005]扫雷Mine【思维题，神奇的模拟+枚举】

    1088: [SCOI2005]扫雷Mine Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 3791  Solved: 2234[Submit][St ...

  3. Codeforces Round #416(Div. 2)-811A.。。。 811B.。。。 811C.dp。。。不会

    CodeForces - 811A A. Vladik and Courtesy time limit per test 2 seconds memory limit per test 256 meg ...

  4. Git服务搭建及github使用教程

    .pos { position: fixed; top: 35%; left: 90% } .pos a { border: 2px solid white; background: #99CCFF; ...

  5. java 跳出多层循环

    lableB: for(int i=0;i<10;i++){ lableA: for(int j=0;j<10;j++){ System.out.println(j); if(j==1){ ...

  6. UEP-保存

    uep的保存操作分为ajaxgrid和ajaxform两种方式 1.ajaxgrid public void storeInfoSave(){ try { //两个dataWrap 一个dataWra ...

  7. 如何为图片添加热点链接？（map + area）

    所谓图片热点链接就是为图片指定一个或多个区域以实现点击跳转到指定的页面.简单来说就是点击某一区域就能跳转到相应的页面,而无需点击整个图片才能跳转. 说到图片热点链接,我首先想到了map + area, ...

  8. DTD约束

    DTD约束 一,导入DTD方式   二,DTD语法 2)DTD语法 约束标签 <!ELEMENT 元素名称类别>或<!ELEMENT 元素名称(元素内容)> 类别: 空标签: ...

  9. 织梦dedecms中arclist标签下无法嵌套图片

    版权声明:本文为博主原创文章,未经博主允许不得转载. 错误代码: {dede:arclist row=10 orderby=click titlelen=35} [field:title/] {/de ...

  10. CCF系列之图像旋转(201503-1)

    试题编号: 201503-1时间限制: 5.0s 内存限制: 256.0MB 问题描述 旋转是图像处理的基本操作,在这个问题中,你需要将一个图像逆时针旋转90度. 计算机中的图像表示可以用一个矩阵来表 ...