最近闲来无聊，看了下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++课程设计类作业2

    不要问我一个晚上在干啥,就写写这种烦到极点的类,啰嗦! #include <bits/stdc++.h> using namespace std; class complexed { pu ...

  2. Codeforces 626F Group Projects(滚动数组+差分dp)

    F. Group Projects time limit per test:2 seconds memory limit per test:256 megabytes input:standard i ...

  3. 4395: [Usaco2015 dec]Switching on the Lights

    每次到达一个点,或者点亮一个房间的灯的时候,检查一下它四周的点能否走. 一开始看错题了..要求的是最多能开多少房的灯. #include<cstdio> #include<iostr ...

  4. printf不能直接输出string类型

    因为string不是c语言的内置数据,所以直接printf输出string类型的是办不到的.要这样输出: printf("%s\n",a.c_str()); 举例: #includ ...

  5. [国嵌笔记][013][Mini2440开发板介绍]

    系统资源 处理器:三星 S3C2440A ARM9 内存:64M SDRAM Nor Flash:2MB Nand  Flash:256MB LCD:3.5寸 分辨率320*240 启动模式 从nan ...

  6. 微信小程序实现淡入淡出效果（页面跳转）

    //目前小程序没有fadeIn(),fadeOut()方法所以还是本方法手写  <!--wxml--><!--蒙版(渐出淡去效果)--><view class=" ...

  7. CSS3之border-radius圆角

    CSS3之border-radius圆角 DIV盒子圆角 图片圆角,CSS3样式实现盒子对象圆角.图片圆角效果.div css3 border-radius圆角样式教程篇. 一.css3单词与语法结构 ...

  8. 最常用Python开源框架有哪些？

    Python开源框架有很多,像Django.Flask.webpy等等,但哪些是最常用到的呢?我们收集了一些Python使用者的宝贵意见,把他们认为最常用的Python开源框架简单的介绍给大家. 一. ...

  9. 本地访问服务器上的wamp

    一,httpd-vhosts.conf文件           # Virtual Hosts #     ServerName localhost     DocumentRoot D:/wamp/ ...

  10. two Pass方法连通域检测

    原理: Two-Pass方法检测连通域的原理可参见这篇博客:http://blog.csdn.net/lichengyu/article/details/13986521. 参考下面动图,一目了然. ...