[js高手之路] html5 canvas动画教程 - 匀速运动 - ghostwu(2)_H5之家

HTML5技术

[js高手之路] html5 canvas动画教程 - 匀速运动 - ghostwu(2)

字号+ 作者：H5之家来源：H5之家 2017-10-09 12:00 我要评论( )

1 head 2 meta charset='utf-8' / 3 style 4 #canvas { 5 border: 1px dashed #aaa; 6 } 7 /style 8 script src="./ball.js"/script 9 script 10 window.onload = function () { 11 var oCanvas = document.querySe

1 <head> 2 <meta charset='utf-8' /> 3 <style> 4 #canvas { 5 border: 1px dashed #aaa; 6 } 7 </style> 8 <script src="./ball.js"></script> 9 <script> 10 window.onload = function () { 11 var oCanvas = document.querySelector("#canvas"), 12 oGc = oCanvas.getContext('2d'), 13 width = oCanvas.width, height = oCanvas.height, 14 ball = new Ball( 0, 0 ), 15 speed = 5, 16 vx = speed * Math.cos( 10 * Math.PI / 180 ), 17 vy = speed * Math.sin( 10 * Math.PI / 180 ); 18 19 (function linear() { 20 oGc.clearRect(0, 0, width, height); 21 ball.fill( oGc ); 22 ball.x += vx; 23 ball.y += vy; 24 requestAnimationFrame(linear); 25 })(); 26 } 27 </script> 28 </head> 29 <body> 30 <canvas></canvas> 31 </body>