canvas-球体动画运动

最新推荐文章于 2023-11-22 17:14:37 发布
最新推荐文章于 2023-11-22 17:14:37 发布
阅读量382 收藏
点赞数
分类专栏： 前端 JS WEB 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013362192/article/details/114984503
版权
前端 同时被 3 个专栏收录
67 篇文章 0 订阅
订阅专栏
JS
59 篇文章 0 订阅
订阅专栏
WEB
50 篇文章 1 订阅
订阅专栏

canvas-球体动画运动 目录

文章目录

前言

  • Polyfill多平台适用
  • 边缘检测
  • 球体运动

缺点：

  • 如果每次都要重新绘图，图很复杂就会拖累性能

解决办法：

  1. clip()每次只重绘剪辑出来的区域
  2. 建立副屏canvas实现双缓冲机制

原版代码实现

效果展示

在这里插入图片描述

index.html

<!DOCTYPE html>
   <head>
     <title>Using requestAnimationFrame()</title>

      <style> 
         body {
            background: #dddddd;
         }

         #canvas {
            background: #ffffff;
            cursor: pointer;
            margin-left: 10px;
            margin-top: 10px;
            -webkit-box-shadow: 3px 3px 6px rgba(0,0,0,0.5);
            -moz-box-shadow: 3px 3px 6px rgba(0,0,0,0.5);
            box-shadow: 3px 3px 6px rgba(0,0,0,0.5);
         }

         #controls {
            margin-top: 10px;
            margin-left: 15px;
         }
      </style>
   </head>

   <body>
      <div id='controls'>
         <input id='animateButton' type='button' value='Animate'/>
      </div>

      <canvas id='canvas' width='750' height='500'>
         Canvas not supported
      </canvas>

      <script src='./requestNextAnimationFrame.js'></script>
      <script src='./main.js'></script>
   </body>
</html>

requestNextAnimationFrame.js

// requestNextAnimationFrame.js
window.requestNextAnimationFrame = (function() {
    let originalWebkitRequestAnimationFrame = undefined,
        wrapper = undefined,
        callback = undefined,
        geckoVersion = 0,
        userAgent = navigator.userAgent,
        index = 0;

    if(window.webkitRequestAnimationFrame) {
        wrapper = time => {
            if(time === undefined)  time = +new Date();
            this.callback(time);
        };

        originalWebkitRequestAnimationFrame = window.webkitRequestAnimationFrame;

        window.webkitRequestAnimationFrame = (callback, element) => {
            this.callback = callback;
            
            originalWebkitRequestAnimationFrame(wrapper, element);
        };
    }

    if(window.mozRequestAnimationFrame) {
        index = userAgent.indexOf('rv:');

        if(userAgent.indexOf('Gecko') !== -1){
            geckoVersion = userAgent.substr(index + 3, 3);

            if(geckoVersion === '2.0'){
                window.mozRequestAnimationFrame = undefined;
            }
        }
    }


    return window.requestAnimationFrame   ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame   ||
        window.oRequestAnimationFrame     ||
        window.msRequestAnimationFrame    ||

        function(callback, element) {
            let start,
                finish;

            window.setTimeout(function() {
                start = +new Date();
                callback(start);
                finish = +new Date();

                this.timeout = 1000 / 60 - (finish - start);
            }, this.timeout);
        };
})();

main.js

const discs = [
    {
        x: 150,
        y: 250,
        lastX: 150,
        lastY: 250,
        velocityX: -3.2,
        velocityY: 3.5,
        radius: 25,
        innerColor: 'rgba(255, 255, 0, 1)',
        middleColor: 'rgba(255, 255, 0, 0.7)',
        outerColor: 'rgba(255, 255, 0, 0.5)',
        strokeStyle: 'gray'
    },

    {
        x: 50,
        y: 150,
        lastX: 50,
        lastY: 150,
        velocityX: 2.2,
        velocityY: 2.5,
        radius: 25,
        innerColor: 'rgba(100, 145, 230, 1.0)',
        middleColor: 'rgba(100, 145, 230, 0.7)',
        outerColor: 'rgba(100, 145, 230, 0.5)',
        strokeStyle: 'blue'
    },

    {
        x: 150,
        y: 75,
        lastX: 150,
        lastY: 75,
        velocityX: 1.2,
        velocityY: 1.5,
        radius: 25,
        innerColor: 'rgba(255, 0, 0, 1.0)',
        middleColor: 'rgba(255, 0, 0, 0.7)',
        outerColor: 'rgba(255, 0, 0, 0.5)',
        strokeStyle: 'orange'
    },

    {
        x: 150,
        y: 75,
        lastX: 150,
        lastY: 75,
        velocityX: 1.4,
        velocityY: 1.6,
        radius: 20,
        innerColor: 'rgba(255, 0, 0, 1.0)',
        middleColor: 'rgba(255, 0, 0, 0.7)',
        outerColor: 'rgba(255, 0, 0, 0.5)',
        strokeStyle: 'green'
    }
];

let canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d'),
    paused = true,
    animateButton = document.getElementById('animateButton'),
    numDiscs = discs.length;

// Functions
// 绘制背景线
function drawBackground() {
    let STEP_Y =12,
        i = context.canvas.height;

    context.strokeStyle = 'lightgray';
    context.lineWidth = 0.5;

    // 绘制横线
    while(i > STEP_Y * 4) {
        context.beginPath();
        
        context.moveTo(0, i);
        context.lineTo(context.canvas.width, i);
        
        context.stroke();

        i -= STEP_Y;
    }

    context.save();

    context.strokeStyle = 'rgba(100,0,0,0.3)';
    context.lineWidth = 1;
    
    context.beginPath();
    context.moveTo(35,0);
    context.lineTo(35, context.canvas.height);
    context.stroke();

    context.restore();
}

// 运动和边界检测
function update(){
    let disc = null;

    for(let i of discs){
        disc = i;
        // 边缘检测
        // 横向边界定位
        if(disc.x + disc.velocityX + disc.radius > context.canvas.width ||
            disc.x + disc.velocityX - disc.radius < 0){
                disc.velocityX = -disc.velocityX;
            }
        // 纵向边界定位
        if(disc.y + disc.velocityY + disc.radius > context.canvas.height ||
            disc.y + disc.velocityY - disc.radius < 0){
                disc.velocityY = -disc.velocityY;
            }
        // 运动
        disc.x += disc.velocityX;
        disc.y += disc.velocityY;
    }
}

//绘制渐变色的圆
function draw() {
    let disc = null;

    for(let i of discs) {
        disc = i;

        let gradient = context.createRadialGradient(disc.x, disc.y, 0, disc.x, disc.y, disc.radius);

        gradient.addColorStop(0.3, disc.innerColor);
        gradient.addColorStop(0.5, disc.middleColor);
        gradient.addColorStop(1.0, disc.outerColor);

        context.save();

        context.beginPath();
        
        context.arc(disc.x,disc.y,disc.radius,0,Math.PI*2,false);
        context.clip();

        context.fillStyle = gradient;
        context.strokeStyle = disc.strokeStyle;

        context.fill();
        context.stroke();

        context.restore();
    }
}

// 动画
function animate(time) {
    if(!paused){
        context.clearRect(0,0,canvas.width,canvas.height);

        drawBackground();
        update();
        draw();

        window.requestNextAnimationFrame(arguments.callee);
    }
}

// main入口
context.font = '48px Helvetica';

animateButton.onclick = event => {
    paused = paused ? false : true;

    if(paused) {
        animateButton.value = 'Animate';
    } else {
        window.requestNextAnimationFrame(animate);

        animateButton.value = 'Pause';
    }
};

基于时间的运动

效果

  • 图片过大

index.html

<!DOCTYPE html>
   <head>
     <title>Time-based Motion</title>

      <style> 
         body {
            background: #dddddd;
            width: 770px;
         }

         .canvas {
            background: #ffffff;
            -webkit-box-shadow: rgba(0,0,0,0.5) 5px 5px 20px;
            -moz-box-shadow: rgba(0,0,0,0.5) 5px 5px 20px;
            box-shadow: rgba(0,0,0,0.5) 5px 5px 20px;
            margin-bottom: 10px;
         }
         
         #canvas {
            position: absolute;
            left: 0px;
            top: 20px;
            margin: 20px;
            border: thin inset rgba(100,150,230,0.5);
         }

         .floatingControls {
            font-family: Droid Sans, Arial, Helvetica, sans-serif;
            font-size: 12px;
            color: slateblue;
            padding: 10px;
            margin: 10px;
            width: 12em;
            background: rgba(255, 255, 255, 0.3);
            border: thin solid rgba(0, 0, 0, 0.6);
            -webkit-box-shadow: rgba(0,0,0,0.5) 5px 5px 20px;
            -moz-box-shadow: rgba(0,0,0,0.5) 5px 5px 20px;
            box-shadow: rgba(0,0,0,0.5) 5px 5px 20px;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
         }
         
         #controls {
            margin-top: 10px;
            margin-left: 15px;
         }
      </style>
   </head>

  <body>
    <div id='controls'>
      <div class='floatingControls' id='timeBasedMotionControls'>
         <input type='checkbox' id='timeBasedMotionCheckbox'/>Time-based Motion&nbsp;
      </div>

      <input type='button' id='topAnimateButton' value='Animate'
                  style='font-size: 0.75em; position: absolute; left: 670px; top: 70px; z-index: 2;'/>
            
      <input type='button' id='bottomAnimateButton' value='Animate'
                  style='font-size: 0.75em; position: absolute; left: 670px; top: 380px; z-index: 2;'/>
    </div>

    <canvas id='topCanvas' class='canvas' width='750' height='300'>
      Canvas not supported
    </canvas>

    <canvas id='bottomCanvas' class='canvas' width='750' height='300'>
      Canvas not supported
    </canvas>

    <script src='top.js'></script>
    <script src='bottom.js'></script>
  </body>
</html>

top.js

var COREHTML5 = COREHTML5 || {};

COREHTML5.topLeftTimeBasedMotion = function () {
    var topCanvas = document.querySelector('#topCanvas'),
        topContext = topCanvas.getContext('2d'),
        paused = true,
        discs = [
        { 
            x: 150,
            y: 250,
            lastX: 150,
            lastY: 250,
            velocityX: -3.2,
            velocityY: 3.5,
            radius: 25,
            innerColor: 'rgba(255,255,0,1)',
            middleColor: 'rgba(255,255,0,0.7)',
            outerColor: 'rgba(255,255,0,0.5)',
            shadowColor: 'rgba(175,175,175,0.7)',
            strokeStyle: 'gray',
        },

        { 
            x: 50,
            y: 150,
            lastX: 50,
            lastY: 150,
            velocityX: 2.2,
            velocityY: 2.5,
            radius: 25,
            innerColor: 'rgba(100,145,230,1.0)',
            middleColor: 'rgba(100,145,230,0.7)',
            outerColor: 'rgba(100,145,230,0.5)',
            shadowColor: 'rgba(100,145,230,0.8)',
            strokeStyle: 'blue'
        },

        { 
            x: 150,
            y: 75,
            lastX: 150,
            lastY: 75,
            velocityX: 1.2,
            velocityY: 1.5,
            radius: 25,
            innerColor: 'rgba(255,0,0,1.0)',
            middleColor: 'rgba(255,0,0,0.7)',
            outerColor: 'rgba(255,0,0,0.5)',
            shadowColor: 'rgba(255,0,0,0.7)',
            strokeStyle: 'orange'
        },
        { 
            x: 50,
            y: 150,
            lastX: 150,
            lastY: 250,
            velocityX: -3.2,
            velocityY: -3.5,
            radius: 25,
            innerColor: 'rgba(255,255,0,1)',
            middleColor: 'rgba(255,255,0,0.7)',
            outerColor: 'rgba(255,255,0,0.5)',
            shadowColor: 'rgba(175,175,175,0.7)',
            strokeStyle: 'gray',
        },

        { 
            x: 50,
            y: 75,
            lastX: 50,
            lastY: 150,
            velocityX: 2.2,
            velocityY: -2.5,
            radius: 25,
            innerColor: 'rgba(100,145,230,1.0)',
            middleColor: 'rgba(100,145,230,0.7)',
            outerColor: 'rgba(100,145,230,0.5)',
            shadowColor: 'rgba(100,145,230,0.8)',
            strokeStyle: 'blue'
        },

        { 
            x: 200,
            y: 175,
            lastX: 150,
            lastY: 75,
            velocityX: -1.9,
            velocityY: 1.2,
            radius: 25,
            innerColor: 'rgba(255,0,0,1.0)',
            middleColor: 'rgba(255,0,0,0.7)',
            outerColor: 'rgba(255,0,0,0.5)',
            shadowColor: 'rgba(255,0,0,0.7)',
            strokeStyle: 'orange'
        },
        { 
            x: 250,
            y: 250,
            lastX: 150,
            lastY: 250,
            velocityX: 5.2,
            velocityY: -3.5,
            radius: 25,
            innerColor: 'rgba(255,255,0,1)',
            middleColor: 'rgba(255,255,0,0.7)',
            outerColor: 'rgba(255,255,0,0.5)',
            shadowColor: 'rgba(175,175,175,0.7)',
            strokeStyle: 'gray',
        },

        { 
            x: 150,
            y: 100,
            lastX: 50,
            lastY: 150,
            velocityX: -2.9,
            velocityY: -1.5,
            radius: 25,
            innerColor: 'rgba(100,145,230,1.0)',
            middleColor: 'rgba(100,145,230,0.7)',
            outerColor: 'rgba(100,145,230,0.5)',
            shadowColor: 'rgba(100,145,230,0.8)',
            strokeStyle: 'blue'
        },

        { 
            x: 215,
            y: 175,
            lastX: 150,
            lastY: 75,
            velocityX: -2.2,
            velocityY: 2.5,
            radius: 25,
            innerColor: 'rgba(255,0,0,1.0)',
            middleColor: 'rgba(255,0,0,0.7)',
            outerColor: 'rgba(255,0,0,0.5)',
            shadowColor: 'rgba(255,0,0,0.7)',
            strokeStyle: 'orange'
        },
        { 
            x: 250,
            y: 150,
            lastX: 150,
            lastY: 250,
            velocityX: 4.2,
            velocityY: -5.5,
            radius: 25,
            innerColor: 'rgba(255,255,0,1)',
            middleColor: 'rgba(255,255,0,0.7)',
            outerColor: 'rgba(255,255,0,0.5)',
            shadowColor: 'rgba(175,175,175,0.7)',
            strokeStyle: 'gray',
        },

        { 
            x: 150,
            y: 75,
            lastX: 50,
            lastY: 150,
            velocityX: 3.2,
            velocityY: -3.5,
            radius: 25,
            innerColor: 'rgba(100,145,230,1.0)',
            middleColor: 'rgba(100,145,230,0.7)',
            outerColor: 'rgba(100,145,230,0.5)',
            shadowColor: 'rgba(100,145,230,0.8)',
            strokeStyle: 'blue'
        },

        { 
            x: 100,
            y: 100,
            lastX: 150,
            lastY: 75,
            velocityX: -2.9,
            velocityY: -2.2,
            radius: 25,
            innerColor: 'rgba(255,0,0,1.0)',
            middleColor: 'rgba(255,0,0,0.7)',
            outerColor: 'rgba(255,0,0,0.5)',
            shadowColor: 'rgba(255,0,0,0.7)',
            strokeStyle: 'orange'
        },
        { 
            x: 150,
            y: 250,
            lastX: 150,
            lastY: 250,
            velocityX: -5.2,
            velocityY: 5.5,
            radius: 25,
            innerColor: 'rgba(255,255,0,1)',
            middleColor: 'rgba(255,255,0,0.7)',
            outerColor: 'rgba(255,255,0,0.5)',
            shadowColor: 'rgba(175,175,175,0.7)',
            strokeStyle: 'gray',
        },

        { 
            x: 50,
            y: 150,
            lastX: 50,
            lastY: 150,
            velocityX: 4.2,
            velocityY: 4.5,
            radius: 25,
            innerColor: 'rgba(100,145,230,1.0)',
            middleColor: 'rgba(100,145,230,0.7)',
            outerColor: 'rgba(100,145,230,0.5)',
            shadowColor: 'rgba(100,145,230,0.8)',
            strokeStyle: 'blue'
        },

        { 
            x: 150,
            y: 75,
            lastX: 150,
            lastY: 75,
            velocityX: 2.2,
            velocityY: 2.5,
            radius: 25,
            innerColor: 'rgba(255,0,0,1.0)',
            middleColor: 'rgba(255,0,0,0.7)',
            outerColor: 'rgba(255,0,0,0.5)',
            shadowColor: 'rgba(255,0,0,0.7)',
            strokeStyle: 'orange'
        },
        { 
            x: 50,
            y: 150,
            lastX: 150,
            lastY: 250,
            velocityX: -0.2,
            velocityY: -1.5,
            radius: 25,
            innerColor: 'rgba(255,255,0,1)',
            middleColor: 'rgba(255,255,0,0.7)',
            outerColor: 'rgba(255,255,0,0.5)',
            shadowColor: 'rgba(175,175,175,0.7)',
            strokeStyle: 'gray',
        },

        { 
            x: 50,
            y: 75,
            lastX: 50,
            lastY: 150,
            velocityX: 1.2,
            velocityY: -2.5,
            radius: 25,
            innerColor: 'rgba(100,145,230,1.0)',
            middleColor: 'rgba(100,145,230,0.7)',
            outerColor: 'rgba(100,145,230,0.5)',
            shadowColor: 'rgba(100,145,230,0.8)',
            strokeStyle: 'blue'
        },

        { 
            x: 200,
            y: 175,
            lastX: 150,
            lastY: 75,
            velocityX: 1.9,
            velocityY: -1.2,
            radius: 25,
            innerColor: 'rgba(255,0,0,1.0)',
            middleColor: 'rgba(255,0,0,0.7)',
            outerColor: 'rgba(255,0,0,0.5)',
            shadowColor: 'rgba(255,0,0,0.7)',
            strokeStyle: 'orange'
        },
        { 
            x: 250,
            y: 250,
            lastX: 150,
            lastY: 250,
            velocityX: 3.2,
            velocityY: -5.5,
            radius: 25,
            innerColor: 'rgba(255,255,0,1)',
            middleColor: 'rgba(255,255,0,0.7)',
            outerColor: 'rgba(255,255,0,0.5)',
            shadowColor: 'rgba(175,175,175,0.7)',
            strokeStyle: 'gray',
        },

        { 
            x: 150,
            y: 100,
            lastX: 50,
            lastY: 150,
            velocityX: -1.9,
            velocityY: -2.5,
            radius: 25,
            innerColor: 'rgba(100,145,230,1.0)',
            middleColor: 'rgba(100,145,230,0.7)',
            outerColor: 'rgba(100,145,230,0.5)',
            shadowColor: 'rgba(100,145,230,0.8)',
            strokeStyle: 'blue'
        },

        { 
            x: 215,
            y: 175,
            lastX: 150,
            lastY: 75,
            velocityX: -3.2,
            velocityY: 4.5,
            radius: 25,
            innerColor: 'rgba(255,0,0,1.0)',
            middleColor: 'rgba(255,0,0,0.7)',
            outerColor: 'rgba(255,0,0,0.5)',
            shadowColor: 'rgba(255,0,0,0.7)',
            strokeStyle: 'orange'
        },
        { 
            x: 250,
            y: 150,
            lastX: 150,
            lastY: 250,
            velocityX: 2.2,
            velocityY: -4.5,
            radius: 25,
            innerColor: 'rgba(255,255,0,1)',
            middleColor: 'rgba(255,255,0,0.7)',
            outerColor: 'rgba(255,255,0,0.5)',
            shadowColor: 'rgba(175,175,175,0.7)',
            strokeStyle: 'gray',
        },

        { 
            x: 150,
            y: 75,
            lastX: 50,
            lastY: 150,
            velocityX: 2.2,
            velocityY: -1.5,
            radius: 25,
            innerColor: 'rgba(100,145,230,1.0)',
            middleColor: 'rgba(100,145,230,0.7)',
            outerColor: 'rgba(100,145,230,0.5)',
            shadowColor: 'rgba(100,145,230,0.8)',
            strokeStyle: 'blue'
        },

        { 
            x: 100,
            y: 100,
            lastX: 150,
            lastY: 75,
            velocityX: -5.9,
            velocityY: -0.2,
            radius: 25,
            innerColor: 'rgba(255,0,0,1.0)',
            middleColor: 'rgba(255,0,0,0.7)',
            outerColor: 'rgba(255,0,0,0.5)',
            shadowColor: 'rgba(255,0,0,0.7)',
            strokeStyle: 'orange'
        },
    ],
    numDiscs = discs.length,
    startTime = 0,
    lastTime = 0,
    elapsedTime = 0,
    fps = 0,
    lastFpsUpdate = { time: 0, value: 0 },
    animateButton = document.querySelector('#topAnimateButton'),
    timeBasedMotionCheckbox = document.querySelector('#timeBasedMotionCheckbox'),
    timeBasedMotion = timeBasedMotionCheckbox.checked;

    function eraseBackground() {
    topContext.clearRect(0,0,topCanvas.width,topCanvas.height);
    }

    function drawBackground() {
    var STEP_Y = 12,
        i = topContext.canvas.height;
    
    topContext.strokeStyle = 'lightgray';
    topContext.lineWidth = 0.5;

    topContext.save();
    topContext.restore();

    while(i > STEP_Y*4) {
        topContext.beginPath();
        topContext.moveTo(0, i);
        topContext.lineTo(topContext.canvas.width, i);
        topContext.stroke();
        i -= STEP_Y;
    }

    topContext.save();

    topContext.strokeStyle = 'rgba(100,0,0,0.3)';
    topContext.lineWidth = 1;

    topContext.beginPath();

    topContext.moveTo(35,0);
    topContext.lineTo(35,topContext.canvas.height);
    topContext.stroke();

    topContext.restore();
    }

    function update() {
    var i = numDiscs,
        disc = null;

    while(i--) {
        disc = discs[i];

        if (disc.x + disc.velocityX + disc.radius > topContext.canvas.width ||
            disc.x + disc.velocityX - disc.radius < 0) 
            disc.velocityX = -disc.velocityX;

        if (disc.y + disc.velocityY + disc.radius > topContext.canvas.height ||
            disc.y + disc.velocityY - disc.radius  < 0) 
            disc.velocityY= -disc.velocityY;

        disc.x += disc.velocityX;
        disc.y += disc.velocityY;
    }
    }

    function updateTimeBased(time) {
    var i = numDiscs,
        disc = null;

    if (fps == 0)
        return;
    
    while(i--) {
        disc = discs[i];
        deltaX = disc.velocityX 

        deltaX = disc.velocityX * (elapsedTime / 1000);
        deltaY = disc.velocityY * (elapsedTime / 1000);

        if (disc.x + deltaX + disc.radius > topContext.canvas.width ||
            disc.x + deltaX - disc.radius < 0) {
            disc.velocityX = -disc.velocityX;
            deltaX = -deltaX;
        }

        if (disc.y + deltaY + disc.radius > topContext.canvas.height ||
            disc.y + deltaY - disc.radius < 0) {
            disc.velocityY= -disc.velocityY;
            deltaY = -deltaY;
        }

        disc.x = disc.x + deltaX;
        disc.y = disc.y + deltaY;
    }
    }

    function draw() {
    var i = numDiscs,
        disc = discs[i];

    while(i--) {
        disc = discs[i];

        gradient = topContext.createRadialGradient(disc.x, disc.y, 0,
                            disc.x, disc.y, disc.radius);

        gradient.addColorStop(0.3, disc.innerColor);
        gradient.addColorStop(0.5, disc.middleColor);
        gradient.addColorStop(1.0, disc.outerColor);

        topContext.beginPath();
        topContext.arc(disc.x, disc.y, disc.radius, 0, Math.PI*2, false);

        topContext.save();

        topContext.fillStyle = gradient;
        topContext.strokeStyle = disc.strokeStyle;
        topContext.fill();
        topContext.stroke();
        topContext.restore();
    }
    }

    function calculateFps(now) {
    elapsedTime = now - lastTime;
    fps = 1000 / elapsedTime;
    lastTime = now;
    }

    function updateFps() {
    var now = (+new Date);

    calculateFps(now);
    
    if (now - startTime < 2000) {
        return;
    }

    if (now - lastFpsUpdate.time > 1000) {
        lastFpsUpdate.time = now;
        lastFpsUpdate.value = fps;
    }
    if (!paused) {
        topContext.fillStyle = 'cornflowerblue';
        topContext.fillText(lastFpsUpdate.value.toFixed() + ' fps', 50, 48);
    }
    }

    function animateTopLeft(time) {
    if (time === undefined) {
        time = +new Date;
    }

    if (!paused) {
        eraseBackground();
        drawBackground();
        if (timeBasedMotion) {
            updateTimeBased(time);
        }
        else {
            update();
        }
        draw();
    }

    updateFps();
    }

    animateButton.addEventListener('click', function (e) {
    paused = paused ? false : true;
    if (paused) {
        animateButton.value = 'Animate';
    }
    else {
        animateButton.value = 'Pause';
    }
    });

    timeBasedMotionCheckbox.addEventListener('click', function (e) {
    if (timeBasedMotionCheckbox.checked) {
        timeBasedMotion = true;
        for (var i=0; i < discs.length; ++i) {
            discs[i].velocityX *= 50;
            discs[i].velocityY *= 50;
        }
    }
    else {
        timeBasedMotion = false;
        for (var i=0; i < discs.length; ++i) {
            discs[i].velocityX /= 50;
            discs[i].velocityY /= 50;
        }
    }
    });

    topContext.font = '36px Helvetica';
    drawBackground();
    startTime = +new Date;
    setInterval(animateTopLeft, 1000/60);
}();

bottom.js

var COREHTML5 = COREHTML5 || {};

COREHTML5.bottomRightTimeBasedMotion = function () {
    var canvas = document.querySelector('#bottomCanvas'),
        context = canvas.getContext('2d'),
        paused = true,
        discs = [
        { 
            x: 150,
            y: 250,
            lastX: 150,
            lastY: 250,
            velocityX: -3.2,
            velocityY: 3.5,
            radius: 25,
            innerColor: 'rgba(255,255,0,1)',
            middleColor: 'rgba(255,255,0,0.7)',
            outerColor: 'rgba(255,255,0,0.5)',
            shadowColor: 'rgba(175,175,175,0.7)',
            strokeStyle: 'gray',
        },

        { 
            x: 50,
            y: 150,
            lastX: 50,
            lastY: 150,
            velocityX: 2.2,
            velocityY: 2.5,
            radius: 25,
            innerColor: 'rgba(100,145,230,1.0)',
            middleColor: 'rgba(100,145,230,0.7)',
            outerColor: 'rgba(100,145,230,0.5)',
            shadowColor: 'rgba(100,145,230,0.8)',
            strokeStyle: 'blue'
        },

        { 
            x: 150,
            y: 75,
            lastX: 150,
            lastY: 75,
            velocityX: 1.2,
            velocityY: 1.5,
            radius: 25,
            innerColor: 'rgba(255,0,0,1.0)',
            middleColor: 'rgba(255,0,0,0.7)',
            outerColor: 'rgba(255,0,0,0.5)',
            shadowColor: 'rgba(255,0,0,0.7)',
            strokeStyle: 'orange'
        },
        { 
            x: 50,
            y: 150,
            lastX: 150,
            lastY: 250,
            velocityX: -3.2,
            velocityY: -3.5,
            radius: 25,
            innerColor: 'rgba(255,255,0,1)',
            middleColor: 'rgba(255,255,0,0.7)',
            outerColor: 'rgba(255,255,0,0.5)',
            shadowColor: 'rgba(175,175,175,0.7)',
            strokeStyle: 'gray',
        },

        { 
            x: 50,
            y: 75,
            lastX: 50,
            lastY: 150,
            velocityX: 2.2,
            velocityY: -2.5,
            radius: 25,
            innerColor: 'rgba(100,145,230,1.0)',
            middleColor: 'rgba(100,145,230,0.7)',
            outerColor: 'rgba(100,145,230,0.5)',
            shadowColor: 'rgba(100,145,230,0.8)',
            strokeStyle: 'blue'
        },

        { 
            x: 200,
            y: 175,
            lastX: 150,
            lastY: 75,
            velocityX: -1.9,
            velocityY: 1.2,
            radius: 25,
            innerColor: 'rgba(255,0,0,1.0)',
            middleColor: 'rgba(255,0,0,0.7)',
            outerColor: 'rgba(255,0,0,0.5)',
            shadowColor: 'rgba(255,0,0,0.7)',
            strokeStyle: 'orange'
        },
        { 
            x: 250,
            y: 250,
            lastX: 150,
            lastY: 250,
            velocityX: 5.2,
            velocityY: -3.5,
            radius: 25,
            innerColor: 'rgba(255,255,0,1)',
            middleColor: 'rgba(255,255,0,0.7)',
            outerColor: 'rgba(255,255,0,0.5)',
            shadowColor: 'rgba(175,175,175,0.7)',
            strokeStyle: 'gray',
        },

        { 
            x: 150,
            y: 100,
            lastX: 50,
            lastY: 150,
            velocityX: -2.9,
            velocityY: -1.5,
            radius: 25,
            innerColor: 'rgba(100,145,230,1.0)',
            middleColor: 'rgba(100,145,230,0.7)',
            outerColor: 'rgba(100,145,230,0.5)',
            shadowColor: 'rgba(100,145,230,0.8)',
            strokeStyle: 'blue'
        },

        { 
            x: 215,
            y: 175,
            lastX: 150,
            lastY: 75,
            velocityX: -2.2,
            velocityY: 2.5,
            radius: 25,
            innerColor: 'rgba(255,0,0,1.0)',
            middleColor: 'rgba(255,0,0,0.7)',
            outerColor: 'rgba(255,0,0,0.5)',
            shadowColor: 'rgba(255,0,0,0.7)',
            strokeStyle: 'orange'
        },
        { 
            x: 250,
            y: 150,
            lastX: 150,
            lastY: 250,
            velocityX: 4.2,
            velocityY: -5.5,
            radius: 25,
            innerColor: 'rgba(255,255,0,1)',
            middleColor: 'rgba(255,255,0,0.7)',
            outerColor: 'rgba(255,255,0,0.5)',
            shadowColor: 'rgba(175,175,175,0.7)',
            strokeStyle: 'gray',
        },

        { 
            x: 150,
            y: 75,
            lastX: 50,
            lastY: 150,
            velocityX: 3.2,
            velocityY: -3.5,
            radius: 25,
            innerColor: 'rgba(100,145,230,1.0)',
            middleColor: 'rgba(100,145,230,0.7)',
            outerColor: 'rgba(100,145,230,0.5)',
            shadowColor: 'rgba(100,145,230,0.8)',
            strokeStyle: 'blue'
        },

        { 
            x: 100,
            y: 100,
            lastX: 150,
            lastY: 75,
            velocityX: -2.9,
            velocityY: -2.2,
            radius: 25,
            innerColor: 'rgba(255,0,0,1.0)',
            middleColor: 'rgba(255,0,0,0.7)',
            outerColor: 'rgba(255,0,0,0.5)',
            shadowColor: 'rgba(255,0,0,0.7)',
            strokeStyle: 'orange'
        },
        { 
            x: 150,
            y: 250,
            lastX: 150,
            lastY: 250,
            velocityX: -5.2,
            velocityY: 5.5,
            radius: 25,
            innerColor: 'rgba(255,255,0,1)',
            middleColor: 'rgba(255,255,0,0.7)',
            outerColor: 'rgba(255,255,0,0.5)',
            shadowColor: 'rgba(175,175,175,0.7)',
            strokeStyle: 'gray',
        },

        { 
            x: 50,
            y: 150,
            lastX: 50,
            lastY: 150,
            velocityX: 4.2,
            velocityY: 4.5,
            radius: 25,
            innerColor: 'rgba(100,145,230,1.0)',
            middleColor: 'rgba(100,145,230,0.7)',
            outerColor: 'rgba(100,145,230,0.5)',
            shadowColor: 'rgba(100,145,230,0.8)',
            strokeStyle: 'blue'
        },

        { 
            x: 150,
            y: 75,
            lastX: 150,
            lastY: 75,
            velocityX: 2.2,
            velocityY: 2.5,
            radius: 25,
            innerColor: 'rgba(255,0,0,1.0)',
            middleColor: 'rgba(255,0,0,0.7)',
            outerColor: 'rgba(255,0,0,0.5)',
            shadowColor: 'rgba(255,0,0,0.7)',
            strokeStyle: 'orange'
        },
        { 
            x: 50,
            y: 150,
            lastX: 150,
            lastY: 250,
            velocityX: -0.2,
            velocityY: -1.5,
            radius: 25,
            innerColor: 'rgba(255,255,0,1)',
            middleColor: 'rgba(255,255,0,0.7)',
            outerColor: 'rgba(255,255,0,0.5)',
            shadowColor: 'rgba(175,175,175,0.7)',
            strokeStyle: 'gray',
        },

        { 
            x: 50,
            y: 75,
            lastX: 50,
            lastY: 150,
            velocityX: 1.2,
            velocityY: -2.5,
            radius: 25,
            innerColor: 'rgba(100,145,230,1.0)',
            middleColor: 'rgba(100,145,230,0.7)',
            outerColor: 'rgba(100,145,230,0.5)',
            shadowColor: 'rgba(100,145,230,0.8)',
            strokeStyle: 'blue'
        },

        { 
            x: 200,
            y: 175,
            lastX: 150,
            lastY: 75,
            velocityX: 1.9,
            velocityY: -1.2,
            radius: 25,
            innerColor: 'rgba(255,0,0,1.0)',
            middleColor: 'rgba(255,0,0,0.7)',
            outerColor: 'rgba(255,0,0,0.5)',
            shadowColor: 'rgba(255,0,0,0.7)',
            strokeStyle: 'orange'
        },
        { 
            x: 250,
            y: 250,
            lastX: 150,
            lastY: 250,
            velocityX: 3.2,
            velocityY: -5.5,
            radius: 25,
            innerColor: 'rgba(255,255,0,1)',
            middleColor: 'rgba(255,255,0,0.7)',
            outerColor: 'rgba(255,255,0,0.5)',
            shadowColor: 'rgba(175,175,175,0.7)',
            strokeStyle: 'gray',
        },

        { 
            x: 150,
            y: 100,
            lastX: 50,
            lastY: 150,
            velocityX: -1.9,
            velocityY: -2.5,
            radius: 25,
            innerColor: 'rgba(100,145,230,1.0)',
            middleColor: 'rgba(100,145,230,0.7)',
            outerColor: 'rgba(100,145,230,0.5)',
            shadowColor: 'rgba(100,145,230,0.8)',
            strokeStyle: 'blue'
        },

        { 
            x: 215,
            y: 175,
            lastX: 150,
            lastY: 75,
            velocityX: -3.2,
            velocityY: 4.5,
            radius: 25,
            innerColor: 'rgba(255,0,0,1.0)',
            middleColor: 'rgba(255,0,0,0.7)',
            outerColor: 'rgba(255,0,0,0.5)',
            shadowColor: 'rgba(255,0,0,0.7)',
            strokeStyle: 'orange'
        },
        { 
            x: 250,
            y: 150,
            lastX: 150,
            lastY: 250,
            velocityX: 2.2,
            velocityY: -4.5,
            radius: 25,
            innerColor: 'rgba(255,255,0,1)',
            middleColor: 'rgba(255,255,0,0.7)',
            outerColor: 'rgba(255,255,0,0.5)',
            shadowColor: 'rgba(175,175,175,0.7)',
            strokeStyle: 'gray',
        },

        { 
            x: 150,
            y: 75,
            lastX: 50,
            lastY: 150,
            velocityX: 2.2,
            velocityY: -1.5,
            radius: 25,
            innerColor: 'rgba(100,145,230,1.0)',
            middleColor: 'rgba(100,145,230,0.7)',
            outerColor: 'rgba(100,145,230,0.5)',
            shadowColor: 'rgba(100,145,230,0.8)',
            strokeStyle: 'blue'
        },

        { 
            x: 100,
            y: 100,
            lastX: 150,
            lastY: 75,
            velocityX: -5.9,
            velocityY: -0.2,
            radius: 25,
            innerColor: 'rgba(255,0,0,1.0)',
            middleColor: 'rgba(255,0,0,0.7)',
            outerColor: 'rgba(255,0,0,0.5)',
            shadowColor: 'rgba(255,0,0,0.7)',
            strokeStyle: 'orange'
        },
    ],
    numDiscs = discs.length,
    startTime = 0,
    lastTime = 0,
    fps = 0,
    lastFpsUpdate = { time: 0, value: 0 },
    animateButton = document.querySelector('#bottomAnimateButton'),
    timeBasedMotionCheckbox = document.querySelector('#timeBasedMotionCheckbox'),
    timeBasedMotion = timeBasedMotionCheckbox.checked;

    function eraseBackground() {
    context.clearRect(0,0,canvas.width,canvas.height);
    }

    function drawBackground() {
    var STEP_Y = 12,
        i = context.canvas.height;
    
    context.strokeStyle = 'lightgray';
    context.lineWidth = 0.5;

    context.save();
    context.restore();

    while(i > STEP_Y*4) {
        context.beginPath();
        context.moveTo(0, i);
        context.lineTo(context.canvas.width, i);
        context.stroke();
        i -= STEP_Y;
    }

    context.save();

    context.strokeStyle = 'rgba(100,0,0,0.3)';
    context.lineWidth = 1;

    context.beginPath();

    context.moveTo(35,0);
    context.lineTo(35,context.canvas.height);
    context.stroke();

    context.restore();
    }

    function update() {
    var i = numDiscs,
        disc = null;

    while(i--) {
        disc = discs[i];

        if (disc.x + disc.velocityX + disc.radius > context.canvas.width ||
            disc.x + disc.velocityX - disc.radius < 0) 
            disc.velocityX = -disc.velocityX;

        if (disc.y + disc.velocityY + disc.radius > context.canvas.height ||
            disc.y + disc.velocityY - disc.radius  < 0) 
            disc.velocityY= -disc.velocityY;

        disc.x += disc.velocityX;
        disc.y += disc.velocityY;
    }
    }

    function updateTimeBased(time) {
    var i = numDiscs,
        disc = null;

    if (fps == 0)
        return;
    
    while(i--) {
        disc = discs[i];
        deltaX = disc.velocityX / fps;
        deltaY = disc.velocityY / fps;

        if (disc.x + deltaX + disc.radius > context.canvas.width ||
            disc.x + deltaX - disc.radius < 0) {
            disc.velocityX = -disc.velocityX;
            deltaX = -deltaX;
        }

        if (disc.y + deltaY + disc.radius > context.canvas.height ||
            disc.y + deltaY - disc.radius < 0) {
            disc.velocityY= -disc.velocityY;
            deltaX = -deltaX;
        }

        disc.x = disc.x + deltaX;
        disc.y = disc.y + deltaY;
    }
    }

    function draw() {
    var i = numDiscs,
        disc = discs[i];

    while(i--) {
        disc = discs[i];

        gradient = context.createRadialGradient(disc.x, disc.y, 0,
                            disc.x, disc.y, disc.radius);

        gradient.addColorStop(0.3, disc.innerColor);
        gradient.addColorStop(0.5, disc.middleColor);
        gradient.addColorStop(1.0, disc.outerColor);

        context.beginPath();
        context.arc(disc.x, disc.y, disc.radius, 0, Math.PI*2, false);

        context.save();

        context.fillStyle = gradient;
        context.strokeStyle = disc.strokeStyle;
        context.fill();
        context.stroke();
        context.restore();
    }
    }

    function calculateFps(now) {
    fps = 1000 / (now - lastTime);
    lastTime = now;
    }

    function updateFps() {
    var now = (+new Date);

    calculateFps(now);
    
    if (now - startTime < 2000) {
        return;
    }

    if (now - lastFpsUpdate.time > 1000) {
        lastFpsUpdate.time = now;
        lastFpsUpdate.value = fps;
    }
    if (!paused) {
        context.fillStyle = 'cornflowerblue';
        context.fillText(lastFpsUpdate.value.toFixed() + ' fps', 50, 48);
    }
    }

    function animate(time) {
    if (time === undefined) {
        time = +new Date;
    }

    if (!paused) {
        eraseBackground();
        drawBackground();
        if (timeBasedMotion) {
            updateTimeBased(time);
        }
        else {
            update();
        }
        draw();
    }

    updateFps();
    }

    animateButton.addEventListener('click', function (e) {
    paused = paused ? false : true;
    if (paused) {
        animateButton.value = 'Animate';
    }
    else {
        animateButton.value = 'Pause';
    }
    });

    timeBasedMotionCheckbox.addEventListener('click', function (e) {
    if (timeBasedMotionCheckbox.checked) {
        timeBasedMotion = true;
        for (var i=0; i < discs.length; ++i) {
            discs[i].velocityX *= 50;
            discs[i].velocityY *= 50;
        }
    }
    else {
        timeBasedMotion = false;
        for (var i=0; i < discs.length; ++i) {
            discs[i].velocityX /= 50;
            discs[i].velocityY /= 50;
        }
    }
    });

    context.font = '36px Helvetica';
    drawBackground();
    startTime = +new Date;
    setInterval(animate, 1000/60);
}();

基于时间的对比

结果展示

  • 图片过大

index.html

<!DOCTYPE html>
 <head>
     <title>Time-based Motion</title>

      <style> 
         body {
            background: #dddddd;
            width: 770px;
         }

         .canvas {
            background: #ffffff;
            -webkit-box-shadow: rgba(0,0,0,0.5) 5px 5px 20px;
            -moz-box-shadow: rgba(0,0,0,0.5) 5px 5px 20px;
            box-shadow: rgba(0,0,0,0.5) 5px 5px 20px;
            margin-bottom: 10px;
         }
         
         #canvas {
            position: absolute;
            left: 0px;
            top: 20px;
            margin: 20px;
            border: thin inset rgba(100,150,230,0.5);
         }

         .floatingControls {
            font-family: Droid Sans, Arial, Helvetica, sans-serif;
            font-size: 12px;
            color: slateblue;
            padding: 10px;
            margin: 10px;
            width: 12em;
            background: rgba(255, 255, 255, 0.3);
            border: thin solid rgba(0, 0, 0, 0.6);
            -webkit-box-shadow: rgba(0,0,0,0.5) 5px 5px 20px;
            -moz-box-shadow: rgba(0,0,0,0.5) 5px 5px 20px;
            box-shadow: rgba(0,0,0,0.5) 5px 5px 20px;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
         }
         
         #controls {
            margin-top: 10px;
            margin-left: 15px;
         }
      </style>
   </head>

  <body>
    <div id='controls'>
      <div class='floatingControls' id='timeBasedMotionControls'>
         <input type='checkbox' id='timeBasedMotionCheckbox'/>Time-based Motion&nbsp;
      </div>

      <input type='button' id='topAnimateButton' value='Animate'
                  style='font-size: 0.75em; position: absolute; left: 670px; top: 70px; z-index: 2;'/>
            
    </div>

    <canvas id='topCanvas' class='canvas' width='750' height='600'>
      Canvas not supported
    </canvas>

    <script src='main.js'></script>
  </body>
</html>

main.js

var COREHTML5 = COREHTML5 || {};

COREHTML5.topLeftTimeBasedMotion = function () {
var topCanvas = document.querySelector('#topCanvas'),
    topContext = topCanvas.getContext('2d'),
    paused = true,
    discs = [
      { 
         x: 150,
         y: 250,
         lastX: 150,
         lastY: 250,
         velocityX: -3.2,
         velocityY: 3.5,
         radius: 25,
         innerColor: 'rgba(255,255,0,1)',
         middleColor: 'rgba(255,255,0,0.7)',
         outerColor: 'rgba(255,255,0,0.5)',
         shadowColor: 'rgba(175,175,175,0.7)',
         strokeStyle: 'gray',
      },

      { 
         x: 50,
         y: 150,
         lastX: 50,
         lastY: 150,
         velocityX: 2.2,
         velocityY: 2.5,
         radius: 25,
         innerColor: 'rgba(100,145,230,1.0)',
         middleColor: 'rgba(100,145,230,0.7)',
         outerColor: 'rgba(100,145,230,0.5)',
         shadowColor: 'rgba(100,145,230,0.8)',
         strokeStyle: 'blue'
      },

      { 
         x: 150,
         y: 75,
         lastX: 150,
         lastY: 75,
         velocityX: 1.2,
         velocityY: 1.5,
         radius: 25,
         innerColor: 'rgba(255,0,0,1.0)',
         middleColor: 'rgba(255,0,0,0.7)',
         outerColor: 'rgba(255,0,0,0.5)',
         shadowColor: 'rgba(255,0,0,0.7)',
         strokeStyle: 'orange'
      },
      { 
         x: 50,
         y: 150,
         lastX: 150,
         lastY: 250,
         velocityX: -3.2,
         velocityY: -3.5,
         radius: 25,
         innerColor: 'rgba(255,255,0,1)',
         middleColor: 'rgba(255,255,0,0.7)',
         outerColor: 'rgba(255,255,0,0.5)',
         shadowColor: 'rgba(175,175,175,0.7)',
         strokeStyle: 'gray',
      },

      { 
         x: 50,
         y: 75,
         lastX: 50,
         lastY: 150,
         velocityX: 2.2,
         velocityY: -2.5,
         radius: 25,
         innerColor: 'rgba(100,145,230,1.0)',
         middleColor: 'rgba(100,145,230,0.7)',
         outerColor: 'rgba(100,145,230,0.5)',
         shadowColor: 'rgba(100,145,230,0.8)',
         strokeStyle: 'blue'
      },

      { 
         x: 200,
         y: 175,
         lastX: 150,
         lastY: 75,
         velocityX: -1.9,
         velocityY: 1.2,
         radius: 25,
         innerColor: 'rgba(255,0,0,1.0)',
         middleColor: 'rgba(255,0,0,0.7)',
         outerColor: 'rgba(255,0,0,0.5)',
         shadowColor: 'rgba(255,0,0,0.7)',
         strokeStyle: 'orange'
      },
      { 
         x: 250,
         y: 250,
         lastX: 150,
         lastY: 250,
         velocityX: 5.2,
         velocityY: -3.5,
         radius: 25,
         innerColor: 'rgba(255,255,0,1)',
         middleColor: 'rgba(255,255,0,0.7)',
         outerColor: 'rgba(255,255,0,0.5)',
         shadowColor: 'rgba(175,175,175,0.7)',
         strokeStyle: 'gray',
      },

      { 
         x: 150,
         y: 100,
         lastX: 50,
         lastY: 150,
         velocityX: -2.9,
         velocityY: -1.5,
         radius: 25,
         innerColor: 'rgba(100,145,230,1.0)',
         middleColor: 'rgba(100,145,230,0.7)',
         outerColor: 'rgba(100,145,230,0.5)',
         shadowColor: 'rgba(100,145,230,0.8)',
         strokeStyle: 'blue'
      },

      { 
         x: 215,
         y: 175,
         lastX: 150,
         lastY: 75,
         velocityX: -2.2,
         velocityY: 2.5,
         radius: 25,
         innerColor: 'rgba(255,0,0,1.0)',
         middleColor: 'rgba(255,0,0,0.7)',
         outerColor: 'rgba(255,0,0,0.5)',
         shadowColor: 'rgba(255,0,0,0.7)',
         strokeStyle: 'orange'
      },
      { 
         x: 250,
         y: 150,
         lastX: 150,
         lastY: 250,
         velocityX: 4.2,
         velocityY: -5.5,
         radius: 25,
         innerColor: 'rgba(255,255,0,1)',
         middleColor: 'rgba(255,255,0,0.7)',
         outerColor: 'rgba(255,255,0,0.5)',
         shadowColor: 'rgba(175,175,175,0.7)',
         strokeStyle: 'gray',
      },

      { 
         x: 150,
         y: 75,
         lastX: 50,
         lastY: 150,
         velocityX: 3.2,
         velocityY: -3.5,
         radius: 25,
         innerColor: 'rgba(100,145,230,1.0)',
         middleColor: 'rgba(100,145,230,0.7)',
         outerColor: 'rgba(100,145,230,0.5)',
         shadowColor: 'rgba(100,145,230,0.8)',
         strokeStyle: 'blue'
      },

      { 
         x: 100,
         y: 100,
         lastX: 150,
         lastY: 75,
         velocityX: -2.9,
         velocityY: -2.2,
         radius: 25,
         innerColor: 'rgba(255,0,0,1.0)',
         middleColor: 'rgba(255,0,0,0.7)',
         outerColor: 'rgba(255,0,0,0.5)',
         shadowColor: 'rgba(255,0,0,0.7)',
         strokeStyle: 'orange'
      },
      { 
         x: 150,
         y: 250,
         lastX: 150,
         lastY: 250,
         velocityX: -5.2,
         velocityY: 5.5,
         radius: 25,
         innerColor: 'rgba(255,255,0,1)',
         middleColor: 'rgba(255,255,0,0.7)',
         outerColor: 'rgba(255,255,0,0.5)',
         shadowColor: 'rgba(175,175,175,0.7)',
         strokeStyle: 'gray',
      },

      { 
         x: 50,
         y: 150,
         lastX: 50,
         lastY: 150,
         velocityX: 4.2,
         velocityY: 4.5,
         radius: 25,
         innerColor: 'rgba(100,145,230,1.0)',
         middleColor: 'rgba(100,145,230,0.7)',
         outerColor: 'rgba(100,145,230,0.5)',
         shadowColor: 'rgba(100,145,230,0.8)',
         strokeStyle: 'blue'
      },

      { 
         x: 150,
         y: 75,
         lastX: 150,
         lastY: 75,
         velocityX: 2.2,
         velocityY: 2.5,
         radius: 25,
         innerColor: 'rgba(255,0,0,1.0)',
         middleColor: 'rgba(255,0,0,0.7)',
         outerColor: 'rgba(255,0,0,0.5)',
         shadowColor: 'rgba(255,0,0,0.7)',
         strokeStyle: 'orange'
      },
      { 
         x: 50,
         y: 150,
         lastX: 150,
         lastY: 250,
         velocityX: -0.2,
         velocityY: -1.5,
         radius: 25,
         innerColor: 'rgba(255,255,0,1)',
         middleColor: 'rgba(255,255,0,0.7)',
         outerColor: 'rgba(255,255,0,0.5)',
         shadowColor: 'rgba(175,175,175,0.7)',
         strokeStyle: 'gray',
      },

      { 
         x: 50,
         y: 75,
         lastX: 50,
         lastY: 150,
         velocityX: 1.2,
         velocityY: -2.5,
         radius: 25,
         innerColor: 'rgba(100,145,230,1.0)',
         middleColor: 'rgba(100,145,230,0.7)',
         outerColor: 'rgba(100,145,230,0.5)',
         shadowColor: 'rgba(100,145,230,0.8)',
         strokeStyle: 'blue'
      },

      { 
         x: 200,
         y: 175,
         lastX: 150,
         lastY: 75,
         velocityX: 1.9,
         velocityY: -1.2,
         radius: 25,
         innerColor: 'rgba(255,0,0,1.0)',
         middleColor: 'rgba(255,0,0,0.7)',
         outerColor: 'rgba(255,0,0,0.5)',
         shadowColor: 'rgba(255,0,0,0.7)',
         strokeStyle: 'orange'
      },
      { 
         x: 250,
         y: 250,
         lastX: 150,
         lastY: 250,
         velocityX: 3.2,
         velocityY: -5.5,
         radius: 25,
         innerColor: 'rgba(255,255,0,1)',
         middleColor: 'rgba(255,255,0,0.7)',
         outerColor: 'rgba(255,255,0,0.5)',
         shadowColor: 'rgba(175,175,175,0.7)',
         strokeStyle: 'gray',
      },

      { 
         x: 150,
         y: 100,
         lastX: 50,
         lastY: 150,
         velocityX: -1.9,
         velocityY: -2.5,
         radius: 25,
         innerColor: 'rgba(100,145,230,1.0)',
         middleColor: 'rgba(100,145,230,0.7)',
         outerColor: 'rgba(100,145,230,0.5)',
         shadowColor: 'rgba(100,145,230,0.8)',
         strokeStyle: 'blue'
      },

      { 
         x: 215,
         y: 175,
         lastX: 150,
         lastY: 75,
         velocityX: -3.2,
         velocityY: 4.5,
         radius: 25,
         innerColor: 'rgba(255,0,0,1.0)',
         middleColor: 'rgba(255,0,0,0.7)',
         outerColor: 'rgba(255,0,0,0.5)',
         shadowColor: 'rgba(255,0,0,0.7)',
         strokeStyle: 'orange'
      },
      { 
         x: 250,
         y: 150,
         lastX: 150,
         lastY: 250,
         velocityX: 2.2,
         velocityY: -4.5,
         radius: 25,
         innerColor: 'rgba(255,255,0,1)',
         middleColor: 'rgba(255,255,0,0.7)',
         outerColor: 'rgba(255,255,0,0.5)',
         shadowColor: 'rgba(175,175,175,0.7)',
         strokeStyle: 'gray',
      },

      { 
         x: 150,
         y: 75,
         lastX: 50,
         lastY: 150,
         velocityX: 2.2,
         velocityY: -1.5,
         radius: 25,
         innerColor: 'rgba(100,145,230,1.0)',
         middleColor: 'rgba(100,145,230,0.7)',
         outerColor: 'rgba(100,145,230,0.5)',
         shadowColor: 'rgba(100,145,230,0.8)',
         strokeStyle: 'blue'
      },

      { 
         x: 100,
         y: 100,
         lastX: 150,
         lastY: 75,
         velocityX: -5.9,
         velocityY: -0.2,
         radius: 25,
         innerColor: 'rgba(255,0,0,1.0)',
         middleColor: 'rgba(255,0,0,0.7)',
         outerColor: 'rgba(255,0,0,0.5)',
         shadowColor: 'rgba(255,0,0,0.7)',
         strokeStyle: 'orange'
      },
   ],
   numDiscs = discs.length,
   startTime = 0,
   lastTime = 0,
   elapsedTime = 0,
   fps = 0,
   lastFpsUpdate = { time: 0, value: 0 },
   animateButton = document.querySelector('#topAnimateButton'),
   timeBasedMotionCheckbox = document.querySelector('#timeBasedMotionCheckbox'),
   timeBasedMotion = timeBasedMotionCheckbox.checked;

function eraseBackground() {
   topContext.clearRect(0,0,topCanvas.width,topCanvas.height);
}

function drawBackground() {
   var STEP_Y = 12,
       i = topContext.canvas.height;
   
   topContext.strokeStyle = 'lightgray';
   topContext.lineWidth = 0.5;

   topContext.save();
   topContext.restore();

   while(i > STEP_Y*4) {
      topContext.beginPath();
      topContext.moveTo(0, i);
      topContext.lineTo(topContext.canvas.width, i);
      topContext.stroke();
      i -= STEP_Y;
   }

   topContext.save();

   topContext.strokeStyle = 'rgba(100,0,0,0.3)';
   topContext.lineWidth = 1;

   topContext.beginPath();

   topContext.moveTo(35,0);
   topContext.lineTo(35,topContext.canvas.height);
   topContext.stroke();

   topContext.restore();
}

function update() {
   var i = numDiscs,
       disc = null;

   while(i--) {
      disc = discs[i];

      if (disc.x + disc.velocityX + disc.radius > topContext.canvas.width ||
          disc.x + disc.velocityX - disc.radius < 0) 
         disc.velocityX = -disc.velocityX;

      if (disc.y + disc.velocityY + disc.radius > topContext.canvas.height ||
          disc.y + disc.velocityY - disc.radius  < 0) 
         disc.velocityY= -disc.velocityY;

      disc.x += disc.velocityX;
      disc.y += disc.velocityY;
   }
}

function updateTimeBased(time) {
   var i = numDiscs,
       disc = null;

   if (fps == 0)
      return;
   
   while(i--) {
      disc = discs[i];
      deltaX = disc.velocityX 

      deltaX = disc.velocityX * (elapsedTime / 1000);
      deltaY = disc.velocityY * (elapsedTime / 1000);

      if (disc.x + deltaX + disc.radius > topContext.canvas.width ||
         disc.x + deltaX - disc.radius < 0) {
         disc.velocityX = -disc.velocityX;
         deltaX = -deltaX;
      }

      if (disc.y + deltaY + disc.radius > topContext.canvas.height ||
         disc.y + deltaY - disc.radius < 0) {
         disc.velocityY= -disc.velocityY;
         deltaY = -deltaY;
      }

      disc.x = disc.x + deltaX;
      disc.y = disc.y + deltaY;
   }
}

function draw() {
   var i = numDiscs,
       disc = discs[i];

   while(i--) {
      disc = discs[i];

      gradient = topContext.createRadialGradient(disc.x, disc.y, 0,
                         disc.x, disc.y, disc.radius);

      gradient.addColorStop(0.3, disc.innerColor);
      gradient.addColorStop(0.5, disc.middleColor);
      gradient.addColorStop(1.0, disc.outerColor);

      topContext.beginPath();
      topContext.arc(disc.x, disc.y, disc.radius, 0, Math.PI*2, false);

      topContext.save();

      topContext.fillStyle = gradient;
      topContext.strokeStyle = disc.strokeStyle;
      topContext.fill();
      topContext.stroke();
      topContext.restore();
   }
}

function calculateFps(now) {
   elapsedTime = now - lastTime;
   fps = 1000 / elapsedTime;
   lastTime = now;
}

function updateFps() {
   var now = (+new Date);

   calculateFps(now);
   
   if (now - startTime < 2000) {
      return;
   }

   if (now - lastFpsUpdate.time > 1000) {
      lastFpsUpdate.time = now;
      lastFpsUpdate.value = fps;
   }
   if (!paused) {
      topContext.fillStyle = 'cornflowerblue';
      topContext.fillText(lastFpsUpdate.value.toFixed() + ' fps', 50, 48);
   }
}

function animateTopLeft(time) {
   if (time === undefined) {
      time = +new Date;
   }

   if (!paused) {
      eraseBackground();
      drawBackground();
      if (timeBasedMotion) {
         updateTimeBased(time);
      }
      else {
        update();
      }
      draw();
   }

   updateFps();
}

animateButton.addEventListener('click', function (e) {
   paused = paused ? false : true;
   if (paused) {
      animateButton.value = 'Animate';
   }
   else {
      animateButton.value = 'Pause';
   }
});

timeBasedMotionCheckbox.addEventListener('click', function (e) {
   if (timeBasedMotionCheckbox.checked) {
      timeBasedMotion = true;
      for (var i=0; i < discs.length; ++i) {
         discs[i].velocityX *= 50;
         discs[i].velocityY *= 50;
      }
   }
   else {
      timeBasedMotion = false;
      for (var i=0; i < discs.length; ++i) {
         discs[i].velocityX /= 50;
         discs[i].velocityY /= 50;
      }
   }
});

topContext.font = '36px Helvetica';
drawBackground();
startTime = +new Date;
setInterval(animateTopLeft, 1000/120);
}();
莫兮是我
关注
专栏目录
html5Canvas实现球内波浪动画
02-03
html5Canvas实现的球内波浪动画，包括每一步实现的源码，注释，方便修改使用
canvas & animation
weixin_30532369的博客
03-27 100
1.using canvas using canvas to set difference property. it will showing like an animation. The true animation is also showing using this. 2.AnimatorUpdateListener 关键点是，在动画注册以后，可以监听AnimatorUpdat...
CSS齿轮转动加载动画
qq_38862628的博客
12-15 849
CSS——齿轮转动加载动画 **前言：**该动画主要流程分为三块：绘制齿轮，齿轮转动动画，出场动画 绘制齿轮 绘制齿轮主要是使用svg进行绘制的 <svg class="guaongRudderOne"> <circle class="guaongRudderLine" cx="50" cy="50" r="40" fill="#fff"/> <line class="guaongRudderLine" x1="7" y1="25" x2="93" y2="75"
一步步打造Canvas小球动画
weixin_34194359的博客
08-18 398
我们需要使用到Canvas的方法有： context.arc(x, y, r, sAngle, eAngle, counterclockwise); 第一步：绘制一个小球 var canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'),...
canvas之小球动画
小白小白从不日别的博客
07-17 658
原理及分析： 首先，利用canvas先绘制一个一定半径的球 其次，要注意在小球运动的过程中，小球的x坐标和y坐标是实时都在变化的，因此在绘制小球的时候就不能将其写死 再者，要明白在浏览器上：向右运动是x轴的正方向，向下运动是y轴的正方向；因此在设置小球在x轴和y轴上的运行速度时需要注意 最后，需要设置边界值：当小球在x轴上运动到小于它的半径时，此时应该向右运动了；当小球在x轴上运动到宽度-半径时就应该向左运动；当小球在y轴上运动到高度-半径时，就应该向上运动了；当小球在y轴上运动到小于等于半径时就应
canvas-js-动画-例子
最新发布
12-27
如果球体碰到边界，需要改变其方向，以保持在Canvas内运动。 此外，还可以利用`ctx.save()`和`ctx.restore()`保存和恢复当前的绘图状态，这样可以更方便地处理旋转、缩放等复杂变换。同时，`ctx.translate()`和`ctx...
HTML5 Canvas 3D跳动Loading加载动画-可调节参数
11-09
在这个特定的案例中，"HTML5 Canvas 3D跳动Loading加载动画-可调节参数"是一个利用Canvas API创建的3D加载动画，其特点是可以根据需求调整动画参数，提供更个性化的用户体验。 首先，我们需要了解HTML5 Canvas的...
canvas-点击四周彩球和点击出现小心心.rar
06-08
6. **碰撞检测**：如果彩球碰到Canvas边缘，可能需要改变其运动方向，这需要用到简单的几何碰撞检测算法。 接下来，我们分析“canvas-鼠标点击小心心.html”。这个文件与前一个文件类似，但在用户点击时，显示的是...
HTML5 Canvas实现的泡沫球体动画效果源码.zip
11-03
这个"HTML5 Canvas实现的泡沫球体动画效果源码.zip"文件包含了一个使用Canvas API创建泡沫球体动画的示例。下面我们将深入探讨HTML5 Canvas以及如何利用它来制作动画。 首先，HTML5 Canvas是一个基于矢量图形的画布...
前端canvas案例，下落小球碰撞物体运动轨迹，简单3D弹球基础逻辑
06-15
内容概要：下落小球碰撞物体运动轨迹，简单3D弹球基础逻辑。 实现技术：htm+js实现。双击浏览器打开即可看效果 能学到什么：canvas技术 适用人群： 前端canvas学习新手 阅读建议：支持canvas的浏览器
HTML5 使用canvas画布做小球回弹动画
05-14
HTML5 使用canvas画布做小球回弹动画，使绘画出来的小球沿着矩形的轨迹进行对称回弹，代码简单易懂，适合初学者练习。
HTML5 Canvas三维立体的旋转物体动画
12-29
HTML5 Canvas三维立体的旋转物体动画
逼真的Canvas 3D地球旋转动画特效
06-11
一个非常逼真的Canvas 3D地球旋转动画特效，支持鼠标拖动缩放查看地球，右下角有全屏查看按钮，点击全屏模式查看地球旋转效果。
html页面，js利用canvas绘制拖动和缩放球体
12-05
html页面，js利用canvas绘制拖动和缩放球体。 鼠标选中或者未选中球体都可以拖动和缩放画布
canvas碰撞球
04-12
1、使用canvas实现小球碰撞； 2、全屏显示无滚动条； 3、设置定时器使小球动起来，页面流畅不卡顿； 4、html页面，浏览器直接运行
canvas笔记-绘制运动小球（落地弹起，遇边回弹）
IT1995的博客
05-28 1543
程序运行截图如下： 就是这个球，遇到底端及左右两边都可以弹 源码如下： canvas4.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <canvas id="canvas" style="display.
用canvas画一个球体!!
laihaodong的博客
05-29 3925
html:&lt;canvas width="500" height="500" id='can'&gt;&lt;/canvas&gt;js: var can=document.getElementById('can');        ctx = can.getContext('2d');         ctx.beginPath(); ctx.arc(250,250,250,0,2*Math...
HTML应用开发基础篇-Canvas动画（小球）
徐小mu的博客
09-23 303
前面介绍了使用canvas来画一些图形，这里将介绍如何使用canvas去制作动态图形。见代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> c...
JavaScript+canvas实现一个旋转的3D球动画效果
hjd2018的博客
11-22 2584
JavaScript+canvas实现一个旋转的3D球动画效果
Android编程：实现物理摆动球体动画
"Android实现左右摆动的球体动画效果" 在Android开发中，创建动态的、仿真的动画效果可以极大地提升用户体验。本篇文章探讨的是如何在Android中实现一个左右摆动的球体动画，该效果常见于各种应用中，如文章末尾的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值