网站首页 » 前端开发 » HTML5 » Canvas 动画之多对象运动
上一篇:
下一篇:

Canvas 动画之多对象运动

前言

之前分享过一篇文章《Canvas 动画之来回运动的小圆》,对于很多朋友而言,这都是小菜一碟。不管怎么说,这都是自己走过的路,记下来也不一定有很大作用,但至少可以给自己一个交代,对于以后都是美美的回忆。本文要分享的是基于上面这篇文章的。但会比上面这篇文章更让人为之动容,不信?咱们走走瞧。

在这里没有过多的话要说,作为一个准前端开发程序员,代码也许就是我对你最冲动的告白。

HTML 代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas 多对象运动动画-云库前端</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html,
        body {
            width: 100%;
            height: 100%;
        }

        canvas {
            display: block;
            background: #000;
        }
    </style>
</head>
<body>
    <script src="index.js"></script>
    <script>
    var iCircle = new Circle();
    </script>
</body>
</html>

HTML 代码简单到没朋友,一看就懂。接下来就是此文章的主角,请欣赏:

JavaScript 代码
/*
* @Author: 朝夕熊
* @Date:   2017-10-23 18:27:45
* @Last Modified by:   朝夕熊
* @Last Modified time: 2017-11-02 20:48:11
*/

function Circle() {
    this.init();
    this.generalRandomParam();
    this.drawCircles();
    this.ballAnimate();

}

// 初始化
Circle.prototype.init = function(){
    //父元素宽高
    this.stateW = document.body.offsetWidth;
    this.stateH = document.body.offsetHeight;
    this.iCanvas = document.createElement("canvas");
    // 设置Canvas 与父元素同宽高
    this.iCanvasW = this.iCanvas.width = this.stateW;
    this.iCanvasH = this.iCanvas.height = this.stateH;
    // 获取 2d 绘画环境
    this.ctx = this.iCanvas.getContext("2d");
    // 插入到 body 元素中
    firstInsert(document.body,this.iCanvas);
    // 随机生成圆的数量
    this.ballNumber = ramdomNumber(50, 100);
    this.balls = [];
    this.speed = 0;
}

// 渲染出所有圆
Circle.prototype.drawCircles = function () {
    for(var i=0;i<this.ballNumber;i++){
        this.renderBall(this.balls[i]);
    }
}

// 随机生成每个圆的相关参数
Circle.prototype.generalRandomParam = function(){
    for(var i=0;i<this.ballNumber;i++){
        var ball = {};
        ball.a = ramdomNumber(0, 0.5); // 随机生成一个加速度
        ball.size = ramdomNumber(3, 50); // 随机生成圆半径
        // 随机生成圆心 x 坐标
        ball.x = ramdomNumber(0+ball.size, this.iCanvasW-ball.size);
        ball.y = 0;
        ball.speed = 0;
        this.balls.push(ball);
    }
}

// 改变圆的位置
Circle.prototype.changeposition = function(){
    for(var i=0;i<this.ballNumber;i++){
        this.balls[i].speed += this.balls[i].a;
        this.balls[i].x += this.balls[i].speed;
        this.balls[i].y += this.balls[i].speed;
    }
}

// 画圆
Circle.prototype.renderBall = function(ball){
    this.ctx.fillStyle = "#fff";
    this.ctx.beginPath(); // 这个一定要加
    this.ctx.arc(ball.x, ball.y, ball.size, 0, 2 * Math.PI);
    this.ctx.closePath(); // 这个一定要加
    this.ctx.fill();
}

// 开始动画
Circle.prototype.ballAnimate = function(){
    This = this;
    var animateFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    (function move(){
        animateFrame(move);
        This.ctx.clearRect(0, 0, This.iCanvasW, This.iCanvasH);
        This.changeposition();
        for(var i=0;i<This.ballNumber;i++){
           This.renderBall(This.balls[i]);
        }
    })();
}

// 生成一个随机数
function ramdomNumber(min, max) {
    return Math.random() * (max - min) + min;
}

// 插入元素
function firstInsert(target,newElement) {
    target.insertBefore(newElement, target.firstChild);
}

代码说多不多,说少不少。但看得懂是必需的,因为都是很简单的代码组合。

看得再多也不如看一个在线的 DEMO 来得让人感动:http://yunkus.com/demo/canvas/canvas-multiple-object-animation

 

 

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/canvas-multiple-object-animation/

Leave a Reply

Your email address will not be published. Required fields are marked *

评论 END