canvas鼠标跟随的五颜六色小泡泡

Html

Css

var Canvas = document.getElementById("canvas");
Canvas.width = window.innerWidth;
Canvas.height = window.innerHeight;
var can = Canvas.getContext("2d");

function randNum(min, max) {
    return parseInt(Math.random() * (max - min + 1) + min);
}

function ball(clientX, clientY) {
    this.ballX = clientX;
    this.ballY = clientY;
    this.ballR = randNum(5, 10);
    this.speedX = randNum(-5, 5);
    this.speedY = randNum(-5, 5);
    this.ballColor = "rgb(" + randNum(0, 255) + "," + randNum(0, 255) + "," + randNum(0, 255) + ")";

this.draw = function() {
        can.beginPath();
        can.arc(this.ballX, this.ballY, this.ballR, 0, 2 * Math.PI, true);
        can.fillStyle = this.ballColor;
        can.fill();
        can.closePath();
    };

this.move = function() {
        this.ballX += this.speedX;
        this.ballY += this.speedY;
        this.ballR = this.ballR / 1.05;
    }
}

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

立即下载

canvas鼠标跟随的五颜六色小泡泡



代码描述：前端小菜鸡写的日常小demo啦~

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

KinoKo

相关代码

canvas鼠标跟随的五颜六色小泡泡

最新