canvas效果案例：透明球

canvas-透明球案例

image

一、分析思路

1.1随机生成球
1.1.1球的大小
1.1.2球的颜色
1.1.3球心的位置
1.1.4每个球的步长（x,y）

1.2 随机生成的球都是一个对象，将其数据存储至数组当中

1.3 每一帧都清除画布，重新循环数组中的每个球，绘制到画布上

1.4 移动的区间范围是固定的，因此每个球都需要判断其（圆心的位置 + 半径）是否超出了可视范围，如果超出了则需要反向运动

---

1. 先简单的来个canvas

var canvas = document.createElement('canvas');

canvas.width = 500;
canvas.height = 500;
canvas.style.border = '1px solid #CCC';

document.body.appendChild(canvas);

var ctx = canvas.getContext('2d');

2. 设置一下透明度

// 设置全局透明度
ctx.globalAlpha = .6;

3. 随机球球并存入数组中，然后绘制canvas中

// 存储球球的数组
var ballArr = [];
// 新建球球
for (var i = 0; i < 30; i++) {
    // 球心随机坐标
    var x = randomCor(400);
    var y = randomCor(400);
    // 球随机半径
    var r = random(5, 30);
    // 随机颜色
    var c = randomColor();
    // 存储至球球的数组中
    var ball = {
        x,
        y,
        r,
        c,
        // 随机的步长
        stepX: random(3, 6),
        stepY: random(1, 4)
    };
    ballArr.push(ball);
    
    // 开始绘制
    ctx.beginPath();

    ctx.fillStyle = c;
    ctx.arc(x, y, r, 0, 2 * Math.PI);
    ctx.fill();

}

4. 设置定时器，每一帧都去更新球球的坐标，并且重置至数组，然后重绘canvas

var timer = setInterval(function () {
    // 每帧都清空一次画布，在重新绘制
    ctx.clearRect(0, 0, canvas.width, canvas.height);
  
    // 循环每个球球 更新它们的原点坐标及步长
    for (var i = 0; i < ballArr.length; i++) {
        
        //更新新球的坐标及步长
    var newCoor = move(ballArr[i].x, ballArr[i].y, ballArr[i].r, ballArr[i].stepX, ballArr[i].stepY);
        // 重置更新至球球数组中
        ballArr[i].x = newCoor.x;
        ballArr[i].y = newCoor.y;
        ballArr[i].stepX = newCoor.stepX;
        ballArr[i].stepY = newCoor.stepY;

        // 开始绘制
        ctx.beginPath();
        ctx.fillStyle = ballArr[i].c;
        ctx.arc(ballArr[i].x, ballArr[i].y, ballArr[i].r, 0, 2 * Math.PI);
        ctx.fill();
    }
}, 17);

5. 以下是封装的函数

// 判断移动区间
/ **
*  判断移动区间
*  x : 圆心x坐标
*  y ：圆心y坐标
*  r ：半径
*  stepX : x坐标的步长
*  stepY ： y坐标的步长
*/
function move(x, y, r, stepX, stepY) {
// 圆心x – 半径 （是否超出左边）
if (x - r < 0) {
    // stepX 则取反
        stepX *= -1;
        x = r;
    }
    // 圆心y – 半径 （是否超出上边）
if (y - r < 0) {
// stepY 则取反
        stepY *= -1;
        y = r;
    }
// 圆心x + 半径 （是否超出右边）
    if (x + r >= canvas.width) {
        stepX *= -1;
        x = canvas.width - r;
    }
    // 圆心y + 半径 （是否超出下边）
    if (y + r >= canvas.height) {
        stepY *= -1;
        y = canvas.height - r;
    }

    x += stepX;
    y += stepY;

    // 返回新的原点坐标及移动步长
    return {
        x,
        y,
        stepX,
        stepY
    }
}

// 随机颜色
function randomColor() {
    var r = Math.floor(Math.random() * 255);
    var g = Math.floor(Math.random() * 255);
    var b = Math.floor(Math.random() * 255);
    return `rgb(${r}, ${g}, ${b})`;
}

// 坐标随机
function randomCor(x) {
    return Math.floor(Math.random() * x);
}

// 随机数区间
function random(start, end) {
    return Math.floor(Math.random() * (end - start + 1) + end);
}