createjs实现的canvas粒子动画特效

代码语言:html

所属分类:动画

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>Triangle Springs</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        canvas {
            background: #000;
        }

    </style>


</head>
<body translate="no">
    <script src="http://repo.bfw.wiki/bfwrepo/js/underscore-min.js"></script>
    <canvas id="canvas"></canvas>

    <script src='http://repo.bfw.wiki/bfwrepo/js/createjs.min.js'></script>
    <script src='http://repo.bfw.wiki/bfwrepo/js/jquery.17.js'></script>
    <script>
     $('#canvas').attr('width', $(window).width() );
$('#canvas').attr('height', $(window).height() );

function createBall(color, rad) {
	var ball = new createjs.Shape();
	ball.graphics.beginFill(color).drawCircle(0, 0, rad);
	ball.vx = 0;
	ball.vy = 0;
	return ball;
}

function clamp(aMin, aNum, aMax) {
	return Math.min(Math.max(aMin, aNum), aMax);
}

const BALLS_NUM = 50;
const MOVE_TIME = 1500;

let ballsArr = [];
let stage = new createjs.Stage('canvas');
let lastTime = Date.now();

class Balls extends createjs.Container {
	
	constructor() {
		super();
		this.ballsNum = 3;
		this.balls = [];
		this.line = new createjs.Shape();
		
		this.spring = _.random(5, 10) / 100.........完整代码请登录后点击上方下载按钮下载查看

网友评论0