canvas动画

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

var canvas, context, height, width;
setTimeout(codepeninit, 10);
function codepeninit() {
    canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d'),
    height = canvas.height = document.body.offsetHeight,
    width = canvas.width = document.body.offsetWidth;
    setInterval(function () {
        var r = new Runner();
        r.go();
    }, 100);
}
function Runner() {
    this.x = ~~ (width / 2);
    this.y = ~~ (height / 2)
    this.angle = Math.floor(Math.random() * 360);
    this.segment_length = 2;
    this.color = {
        r: ~~(Math.random() * 255),
        g: ~~(Math.random() * 255),
        b: ~~(Math.random() * 255)
    };
}
Runner.prototype = {
    constructor: Runner,
    go: function () {
        var sx = this.x,
            sy = this.y,
            rad = this.angle * (Math.PI/180);
        this.x = ~~ (sx + this.segment_length * Math.cos(rad)),
        this.y = ~~ (sy + this.segment_length * Math.sin(rad));
        context.beginPath();
        context.moveTo(sx, sy);
        context.lineTo(this.x, this.y);
        context.strokeStyle = 'rgba(' + this.color.r + ',' + this.color.g + ',' + this.color.b + ',1)';
        context.stroke();
        context.closePath();
        this.angle += (Math.random() - .5) * 1000;

if (this.x > 0 && this.x < width && this.y > 0 && this.y < height) {
            setTimeout(this.go.bind(this), 1000 / 30);
        }

}
};

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg