js实现canvas能量流动散开分支动画效果代码-html代码-BFW代码库

js实现canvas能量流动散开分支动画效果代码

代码语言：html

所属分类：动画

代码描述：js实现canvas能量流动散开分支动画效果代码，鼠标点击生成能量点。

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

<!DOCTYPE HTML>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style type="text/css">
        body
        			{
        				background-color: #000000;
        				margin: 0px;
        				overflow: hidden;
        			}
        
        			#info
        			{
        				position: absolute;
        				width: 100%;
        				color: #80a000;
        				padding: 5px;
        				font-family:Monospace;
        				font-size:13px;
        				text-align:center;
        			}
    </style>
</head>

<body>

    <div id="info">click anywhere</div>
    <div id="container"></div>

    <script type="text/javascript">
        var container, canvas, context;
        			var WIDTH, HEIGHT;
        
        			var branches, mouseX, mouseY;
        
        			init();
        			setInterval(loop, 1000/60);
        
        			function init()
        			{
        				container = document.getElementById('container');
        
        				WIDTH = window.innerWidth;
        				HEIGHT = window.innerHeight;
        
        				var canvas = document.createElement("canvas");
        				canvas.width = WIDTH;
        				canvas.height = HEIGHT;
        				container.appendChild(canvas);
        
        				context = canvas.getContext("2d");
        				context.fillStyle = "rgb(0, 0, 0)";
        				context.fillRect (0, 0, WIDTH, HEIGHT);
        
        				branches = new Array();
        
        				window.addEventListener('mousedown', onWindowMouseDown, false);
.........完整代码请登录后点击上方下载按钮下载查看