笔记六（脉冲运动）

来源：互联网发布：mac的excel数据有效性编辑：程序博客网时间：2024/04/27 22:41

动画里正弦值除了运用于改变对象的坐标，还可以应用于对象的其他属性。
这里对笔记四稍加修改创建一个脉冲运动。文件名：pulse.html。

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>脉冲运动</title><style type="text/css">    #canvas{background-color: #99cc33;}</style></head><body><canvas id="canvas" width="400" height="400"></canvas><script type="text/javascript" src="utils.js"></script><script type="text/javascript" src="ball.js"></script><script type="text/javascript">    window.onload = function(){        var canvas = document.getElementById("canvas"),            context = canvas.getContext("2d"),            ball = new Ball(),            angle = 0;            centerScale = 1,            range = 0.6,            speed = 0.08;        ball.x = canvas.width/2;        ball.y = canvas.height/2;        if (!window.requestAnimationFrame) {            window.requestAnimationFrame = (window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback){                return window.setTimeout(callback,1000/60);            })        };        (function drawFrame(){            window.requestAnimationFrame(drawFrame,canvas);            context.clearRect(0,0,canvas.width,canvas.height);            ball.scaleX = ball.scaleY = centerScale + Math.sin(angle) * range;            angle += speed;            ball.draw(context);        }());    };</script></body></html>

效果图：
脉冲运动效果图

参见《HTML5+Javascript动画基础》。

0 0