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