Canvas实例之鼠标移动特效(彩色小球)

实现鼠标移动跟随着绽放的彩色小球。完整代码在文档末尾

图示：

思路

获取画布

 //获取画布var canvas = document.getElementById("mycanvas");//获取上下文var ctx = canvas.getContext("2d");

设置球的属性：圆心起始坐标xy、半径r、颜色color。

    function Ball(x, y, r){this.x = x;this.y = y;//半径this.r = r;//设置随机颜色this.color = getRandom();}

随机颜色的方法：颜色组合='#'+6位字符

    function getRandom(){var allType = [0,1,2,3,4,5,6,7,8,9,"a","b","c","d","e","f"];var color = "#";for(var i = 0; i < 6; i++){var random = parseInt(Math.random() * allType.length);//随机数*数组长度，并取整，得到的数一定不会大于数组长度，故拿来当数组的随机下标，得到的就是数组的随机数color +=allType[random];//那随机下标取随机数，并组合成颜色}return color;}

设置鼠标监听事件：鼠标移动过程中创建小球

canvas.addEventListener("mousemove", function(event){//鼠标事件可拿到当前鼠标坐标，event.offsetX相对于画布的x轴坐标new Ball(event.offsetX, event.offsetY, 15);//球类的三大属性});

要实现一堆彩球效果，等于要创建多个小球，这时需要创建一个数组去存储和维护，什么时候存小球呢，每创建一次存一次就好了嘛。

var ballArr = [];
function Ball(x, y, r){this.x = x;this.y = y;//半径this.r = r;//设置随机颜色this.color = getRandom();//每创建一个小球就放进数组ballArr.push(this);//此时的this指向的是当前小球实例}

动画三部曲：清屏-更新-渲染
清屏：

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

更新：更新位置(运动的效果)、更新形态（改变半径）

Ball.prototype.update = function(){//小球的运动this.x += this.dx;//dx、dy可以直接放进小球的属性里面，设置随机值this.y += this.dy;this.r -= 0.2;}

渲染：填充颜色和绘制

Ball.prototype.render = function(){ctx.beginPath();//设置起始路径ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);//画出一个圆ctx.fillStyle = this.color;//设置圆的颜色ctx.fill();//填充绘制圆}

动画过程：在定时器里面更新并渲染数组里的小球

setInterval(function(){ctx.clearRect(0, 0, canvas.width, canvas.height);//更新渲染for(var i = 0; i < ballArr.length; i++){ballArr[i].update();ballArr[i].render();}},10)

完整的代码：

<body><canvas id="mycanvas" width="800" height="500"></canvas><script>//获取画布var canvas = document.getElementById("mycanvas");//获取上下文var ctx = canvas.getContext("2d");// 球类function Ball(x, y, r){this.x = x;this.y = y;//半径this.r = r;//设置随机颜色this.color = getRandom();//设置行进方向this.dx = parseInt(Math.random() * 10) - 5;//要让小球往四面八方，路径就需要有正有负this.dy = parseInt(Math.random() * 10) - 5;//每创建一个小球就放进数组ballArr.push(this);}//彩色=随机颜色function getRandom(){var allType = [0,1,2,3,4,5,6,7,8,9,"a","b","c","d","e","f"];var color = "#";for(var i = 0; i < 6; i++){var random = parseInt(Math.random() * allType.length);color +=allType[random];}return color;}//canvas设置鼠标监听,鼠标移动过程中创建小球canvas.addEventListener("mousemove", function(event){//鼠标事件可拿到当前鼠标坐标new Ball(event.offsetX, event.offsetY, 15);});//更新Ball.prototype.update = function(){//小球的运动this.x += this.dx;this.y += this.dy;this.r -= 0.2;//如果小球的半径小于0了，从数组中删除if(this.r < 0){this.remove();}}Ball.prototype.remove = function(){for(var i = 0; i < ballArr.length; i++){if(ballArr[i] == this){//this指向当前小球ballArr.splice(i, 1);}}}//渲染小球Ball.prototype.render = function(){ctx.beginPath();//设置起始路径ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);//画出一个圆ctx.fillStyle = this.color;//设置圆的颜色ctx.fill();//填充绘制圆}//维护小球的数组var ballArr = [];//动画过程 = 定时器进行动画渲染和更新setInterval(function(){//清屏-更新-渲染//清屏ctx.clearRect(0, 0, canvas.width, canvas.height);//更新渲染for(var i = 0; i < ballArr.length; i++){ballArr[i].update();if(ballArr[i]){ballArr[i].render();}}},10)</script>
</body>

Canvas实例之鼠标移动特效(彩色小球)相关推荐

超多经典 canvas 实例，动态离子背景、移动炫彩小球、贪吃蛇、坦克大战、是男人就下100层、心形文字等等等...
超多经典 canvas 实例普及:<canvas> 元素用于在网页上绘制图形.这是一个图形容器,您可以控制其每一像素,必须使用脚本来绘制图形. 注意:IE 8 以及更早的版本不支持 &l ...
Canvas动画彩色小球下落
彩色小球.html <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
canvas实现鼠标跟随特效
代码如下: <!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="U ...
网页动态背景——随鼠标变换的动态线条（鼠标蜘蛛网特效）
网页动态背景--随鼠标变换的动态线条效果图如下代码如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv=& ...
在鼠标点击特效上加上鼠标移动特效（一）
---------------------2021.3.31更新----------------------------- 补一个代码少一点的demo js代码打包下载下载 js.7z <!D ...
用canvas实现刮刮卡特效
canvas(画布)应用十分广泛,不仅可用来画图,配合ECharts做表格,还能做游戏．不过这次分享一下用canvas实现刮刮卡特效的一个应用．如果还不是很了解canvas基本知识,可以读一下我的相 ...
html 产生烟雾效果,html5 canvas抽象模糊烟雾动画特效
特效描述:html5 canvas 抽象模糊烟雾动画特效.html5 canvas绘制彩色模糊的烟雾动画.抽象模糊的烟雾动画特效代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 vo ...
html5怎么做出旋转效果,HTML5+Canvas制作的幻彩旋转圆盘特效
HTML5+Canvas制作的幻彩旋转圆盘特效 body { background: #000; color: #aaa; font: 100%/20px helvetica; } canvas { ...
在鼠标点击特效上加上鼠标移动特效（二）
图片打包下载前一篇鼠标点击特效--富强.民主.文明.和谐- 效果 <!DOCTYPE html> <html><head><meta charset=&q ...
HTML5 canvas点击爆炸网页特效代码
简介: HTML5 canvas点击爆炸网页特效代码, 直接写在想要出现特效的页面,如果是cms则放在所用的模板文件下foot.php文件里. 网盘下载地址: http://kekewl.net/3D ...

Canvas实例之鼠标移动特效(彩色小球)

Canvas实例之鼠标移动特效(彩色小球)相关推荐

最新文章

热门文章