canvas 梦幻的随机例子效果-白红宇

效果如下：

step1 绘制一个圆的动态效果

var canvas = document.getElementById('canvas1');var context = canvas.getContext('2d'); //获取2d环境下的画布上下文（获取一个画笔）var cX = canvas.width / 2;var cY = canvas.height / 2;var r = 10;setInterval(function() {    context.beginPath();    cX += 2;    cY += 2;    context.arc(cX, cY, r, 0, 2 * Math.PI);    context.fillStyle = 'red';    context.fill();}, 1000 / 20);复制代码

以上代码存在一个问题，即画出来的圆不断生成

解决办法:在定时器代码里添加清空画布的操作

context.clearRect(0, 0, canvas.width, canvas.height);复制代码

step2 绘制多个圆的动态效果(以下是项目的完整代码)

var canvas = document.getElementById('canvas1');var context = canvas.getContext('2d'); //获取2d环境下的画布上下文（获取一个画笔）var setArr = []; //存放圆形的数组var maxNum = 30; //生成圆形数量的最大值/*绘制随机的圆*/var timer1 = setInterval(function() {    /*为了控制浏览器的性能，避免圆形不断地生成，影响性能*/    if (setArr.length > maxNum) {        clearInterval(timer1);    }    var cX = 200 + Math.ceil(Math.random() * 400); //生成200-400之间圆的x坐标    var cY = 200 + Math.ceil(Math.random() * 400); //生成200-400之间圆的y坐标    var r = 5 + Math.ceil(Math.random() * 10);  //5-12之间圆的半径    /*生成rgba颜色的值*/    var red = Math.floor(Math.random() * 256);     var green = Math.floor(Math.random() * 256);    var blue = Math.floor(Math.random() * 256);    var alpha = 0.5 + Math.random() * 0.3;    var bgColor = 'rgba(' + red + ',' + green + ',' + blue + ',' + alpha + ')';    /*设置速度*/    var sX = -2 + Math.ceil(Math.random() * 8);    var sY = -2 + Math.ceil(Math.random() * 8);    var obj = {        cX: cX,        cY: cY,        r: r,        sX: sX,        sY: sY,        bgColor: bgColor    };    /*避免出现圆形出现在原地 没有动画效果*/    if (sX != 0 || sY != 0) {        setArr.push(obj);    }}, 1000/20);/*控制随机圆的动效 一秒钟执行60次*/setInterval(function() {    /*每次绘制一个圆都要清空画布，否则每个圆都会连接在一起形成直线*/    context.clearRect(0, 0, canvas.width, canvas.height);    for (var i = 0; i < setArr.length; i++) {        if(setArr[i].cY + setArr[i].r >= canvas.height || setArr[i].cY - setArr[i].r <= 0){            // 触碰上下边界            setArr[i].sY *= -1;        }        if(setArr[i].cX + setArr[i].r >= canvas.width || setArr[i].cX - setArr[i].r <= 0){            // 触碰左右边界            setArr[i].sX *= -1;        }        /*绘制一个圆形*/        setArr[i].cX += setArr[i].sX;        setArr[i].cY += setArr[i].sY;        context.beginPath();        context.arc(setArr[i].cX, setArr[i].cY, setArr[i].r, 0, 2 * Math.PI);        context.fillStyle = setArr[i].bgColor;        context.fill();    }}, 1000/60);复制代码

在开发过程中遇到的问题：

1、生成的多个粒子部分在原位不动，没有任何变化

2、粒子如何反弹？

第一个解决办法，则是当速度都不为0的时候才把粒子添加到setArr数组中

/*避免出现圆形出现在原地 没有动画效果*/if (sX != 0 || sY != 0) {    setArr.push(obj);}复制代码

第二个问题分析，如下图所示，当具有以下情况的时候进行反弹：

for (var i = 0; i < setArr.length; i++) {    if(setArr[i].cY + setArr[i].r >= canvas.height || setArr[i].cY - setArr[i].r <= 0){        // 触碰上下边界        setArr[i].sY *= -1;    }    if(setArr[i].cX + setArr[i].r >= canvas.width || setArr[i].cX - setArr[i].r <= 0){        // 触碰左右边界        setArr[i].sX *= -1;    }}复制代码