canvas光影喷射回弹动画效果

代码语言:html

所属分类:动画

代码描述:canvas光影喷射回弹动画效果

代码标签: 回弹 动画 效果

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

<!DOCTYPE html>
<html>
<head>

   
<style type="text/css">
        canvas
{
           
position: absolute;
           
height: 100%;
           
width: 100%;
           
left: 0;
           
top: 0;
           
cursor: crosshair;
           
background-color: Blue;
       
}
   
</style>
</head>
<body>
   
<canvas></canvas>
   
<script type="text/javascript">
        bgColor = '#000'; gravity = 0.5; particleColor = '#279'; canvas = document.querySelector('canvas'); ctx = canvas.getContext('2d'); (onresize = function() {
            width = canvas.width = canvas.clientWidth; height = canvas.height = canvas.clientHeight; o = {
                x: Math.floor(width/2), y: Math.floor(height/2)}; edge = {
                top: -o.y, right: width-o.x, bottom: height-o.y, left: -o.x
            }})(); particles = {}; newParticle = (function() {
            var nextIndex = 0; return function(x, y, r, o, c, xv, yv, rv, ov) {
                particles[++nextIndex] = {
                    index: nextIndex, x: x, y: y, r: r, o: o, c:.........完整代码请登录后点击上方下载按钮下载查看

网友评论0