canvas画球跟随鼠标，以及爆炸弹射效果

Html

Css

* {
	margin:0;
	padding:0;
}
body {
	overflow:hidden;
}

var canvas = document.getElementById('myCanvas');
var wW = window.innerWidth;
var wH = window.innerHeight;
var circleCount = 100; // 圆个数
var friedTime, drawTime, time;
var open = false; // true:爆炸移动/false:跟随鼠标

canvas.width = wW;
canvas.height = wH;

// 创建2d画布
var ctx = canvas.getContext('2d');

// 鼠标移动事件
var mouse = {};
canvas.addEventListener('mousemove', track_move, false);

function track_move(e) {
    mouse.x = e.pageX;
    mouse.y = e.pageY;
}

// 鼠标点击炸开
canvas.addEventListener('click', mouse_click, false);

// 点击后爆炸
function fried() {
    ctx.clearRect(0, 0, wW, wH);
    ctx.fillStyle = '#000';
    ctx.globalCompositeOperation = 'lighter';
    ctx.fillRect(0, 0, wW, wH);
    for (var i in circles) {
        var c = circles[i];

ctx.beginPath();
        var gradient = ctx.createRadialGradient(c.point.x, c.point.y, 0, c.point.x, c.point.y, c.radius);
        gradient.addColorStop(0, 'rgba(' + c.r + ',' + c.g + ',' + c.b + ',' + c.opacity + ')');
        gradient.addColorStop(1, 'rgba(' + c.r + ',' + c.g + ',' + c.b + ',' + .2 + ')');
        ctx.fillStyle = gradient;
        ctx.arc(c.point.x, c.point.y, c.radius, Math.PI * 2, false);
        ctx.fill();

// 爆炸移动位置
        if (c.speed > 0) {
            c.point.x += c.move.x * c.speed;
            c.point.y += c.move.y * c.speed;
            c.speed -= .02;
        }
        // 碰到墙随机反射移动
        if (c.point.x - c.radius <= 0 || c.point.x + c.radius >= wW) {
            c.move.x = -c.move.x;
        }
        if (c.point.y - c.radius <= 0 || c.point.y + c.radius >= wH) {
            c.move.y = -c.move.y;
        }
    }
}

// 初始化圆
var circles = [];
for (var i = 0; i < circleCount; i++) {
    circles.push(new Circle());
}

// 创建圆对象
function Circle() {
    // 圆半径 10-30
    this.radius = 10 + Math.random() * 20;

// 圆位置
    if (mouse.x && mouse.y) {
        this.point = {
            x: mouse.x,
            y: mouse.y
        }
    } else {
        this.point = {
            x: wW / 2,
            y: wH / 2
        }
    }

// 圆随机移动
    this.move = {
        x: -5 + Math.random() * 10,
        y: -5 + Math.random() * 10
    }

// 圆的颜色
    this.r = Math.round(Math.random() * 255);
    this.g = Math.round(Math.random() * 255);
    this.b = Math.round(Math.random() * 255);

// 透明度
    this.opacity = .5 + Math.random() * .5;
}

// 绘制圆跟随鼠标移动
function draw() {
    ctx.clearRect(0, 0, wW, wH);
    ctx.globalCompositeOperation = 'source-over';
    ctx.fillStyle = '#000';
    ctx.fillRect(0, 0, wW, wH);
    for (var i in circles) {
        var c = circles[i];
        // 随机移动速度
        c.speed = i * Math.random() + 10;

// 跟随鼠标移动
        if (mouse.x && mouse.y) {
            if (Math.abs(mouse.x - c.point.x) <= c.speed) {
                c.point.x = mouse.x;
            }
            if (Math.abs(mouse.y - c.point.y) <= c.speed) {
                c.point.y = mouse.y;
            }
            // 圆在鼠标右边,圆向左移动
            if (mouse.x < c.point.x) {
                c.point.x -= c.speed;
            }
            // 圆在鼠标左边，圆向右移动
            if (mouse.x > c.point.x) {
                c.point.x += c.speed;
            }
            // 圆在鼠标下面
            if (mouse.y < c.point.y) {
                c.point.y -= c.speed;
            }
            // 圆在鼠标上面
            if (mouse.y > c.point.y) {
                c.point.y += c.speed;
            }
        }
    }
}

drawTime = setInterval(draw, 50);

↑上面代码改变，会自动显示代码结果 jQuery调用版本：2.0.0

立即下载

canvas画球跟随鼠标，以及爆炸弹射效果



代码描述：使用简单的canvas实现元素跟随鼠标移动与随机方向弹射移动效果

1.通过canvas创建一个2d画布
2.创建圆形球对象，对象中初始化一下圆的属性：半径、圆心位置、移动位置、颜色、透明度
3.利用for循环创建100个圆球对象，并添加鼠标移动事件，程序默认是圆球跟随鼠标移动，使用setInterval调用draw方法绘制圆球跟随鼠标
4.添加鼠标点击事件，当点击鼠标切换状态，圆球将停止跟随鼠标，每个圆球将获取一个速度，根据速度与移动位置进行计算使圆球随机移动，直到速度为0停止移动

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

泡??斌メ

相关代码

canvas画球跟随鼠标，以及爆炸弹射效果

最新