如何用html5 canvas实现匀速运动
程序员文章站
2022-04-30 22:17:52
...
匀速运动：指的是物体在一条直线上运动，并且物体在任何相等时间间隔内通过的位移都是相等的。其实就是匀速直线运动，它的特点是加速度为0，从定义可知，在任何相等的时间间隔内，速度大小和方向是相同的。
<head>
<meta charset='utf-8' />
<style>
#canvas {
border: 1px dashed #aaa;
}
</style>
<script>
window.onload = function () {
var oCanvas = document.querySelector("#canvas"),
oGc = oCanvas.getContext('2d'),
width = oCanvas.width, height = oCanvas.height,
x = 0;
function drawBall( x, y, cxt ){
cxt.fillStyle = '#09f';
cxt.beginPath();
cxt.arc( x, y, 20, 0, 2 * Math.PI );
cxt.closePath();
cxt.fill();
}
( function linear(){
oGc.clearRect( 0, 0, width, height );
drawBall( x, height / 2, oGc );
x += 2;
console.log( x );
requestAnimationFrame( linear );
} )();
}
</script>
</head>
<body>
<canvas id="canvas" width="1200" height="600"></canvas>
</body>
上述实例让一个半径20px的小球 从x=0, y=canvas高度的一半，以每帧2px的速度向右匀速运动.
我们可以把小球封装成一个对象:
ball.js文件：
function Ball( x, y, r, color ){
this.x = x || 0;
this.y = y || 0;
this.radius = r || 20;
this.color = color || '#09f';
}
Ball.prototype = {
constructor : Ball,
stroke : function( cxt ){
cxt.strokeStyle = this.color;
cxt.beginPath();
cxt.arc( this.x, this.y, this.radius, 0, 2 * Math.PI );
cxt.closePath();
cxt.stroke();
},
fill : function( cxt ){
cxt.fillStyle = this.color;
cxt.beginPath();
cxt.arc( this.x, this.y, this.radius, 0, 2 * Math.PI );
cxt.closePath();
cxt.fill();
}
}
该小球对象，可以定制位置半径和颜色，支持两种渲染方式（描边和填充）
<head>
<meta charset='utf-8' />
<style>
#canvas {
border: 1px dashed #aaa;
}
</style>
<script src="./ball.js"></script>
<script>
window.onload = function () {
var oCanvas = document.querySelector("#canvas"),
oGc = oCanvas.getContext('2d'),
width = oCanvas.width, height = oCanvas.height,
ball = new Ball( 0, height / 2 );
(function linear() {
oGc.clearRect(0, 0, width, height);
ball.fill( oGc );
ball.x += 2;
requestAnimationFrame(linear);
})();
}
</script>
</head>
<body>
<canvas id="canvas" width="1200" height="600"></canvas>
</body>
斜线匀速运动：
<head>
<meta charset='utf-8' />
<style>
#canvas {
border: 1px dashed #aaa;
}
</style>
<script src="./ball.js"></script>
<script>
window.onload = function () {
var oCanvas = document.querySelector("#canvas"),
oGc = oCanvas.getContext('2d'),
width = oCanvas.width, height = oCanvas.height,
ball = new Ball( 0, height );
(function linear() {
oGc.clearRect(0, 0, width, height);
ball.fill( oGc );
ball.x += 2;
ball.y -= 1;
requestAnimationFrame(linear);
})();
}
</script>
</head>
<body>
<canvas id="canvas" width="1200" height="600"></canvas>
</body>
任意方向的匀速运动（速度分解）
<head>
<meta charset='utf-8' />
<style>
#canvas {
border: 1px dashed #aaa;
}
</style>
<script src="./ball.js"></script>
<script>
window.onload = function () {
var oCanvas = document.querySelector("#canvas"),
oGc = oCanvas.getContext('2d'),
width = oCanvas.width, height = oCanvas.height,
ball = new Ball( 0, 0 ),
speed = 5,
vx = speed * Math.cos( 10 * Math.PI / 180 ),
vy = speed * Math.sin( 10 * Math.PI / 180 );
(function linear() {
oGc.clearRect(0, 0, width, height);
ball.fill( oGc );
ball.x += vx;
ball.y += vy;
requestAnimationFrame(linear);
})();
}
</script>
</head>
<body>
<canvas id="canvas" width="1200" height="600"></canvas>
</body>
以上就是如何用html5 canvas实现匀速运动的详细内容，更多请关注其它相关文章！