HTML5 Canvas 动画小例子_H5之家 - 中国HTML5教程资源分享第一站

助理编辑HTML5 Canvas 动画小例子

2012/1/17 8:59:19 [ 中国学网 ] | 责编：崔宁

返回首页分享到

■概要

　?HTML5のCanvasタグを使って回転しているボールを描くサンプルである。

■要点

　?setIntervalを利用し、定時的にメソッドを呼ぶ

　?contextのtranslate、rotate、drawImage、save、restoreを利用し、回転、イメージを描く

■ソース

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ball</title> </head> <body> <div> <canvas></canvas> </div> <script type="text/javascript"> var g_ball; var g_counter; var g_timerDrawID; window.onload = function() { g_counter = 100; g_ball = new Ball(); g_ball.init(); g_timerDrawID = setInterval("ballMove()", 50); }; function ballMove() { g_ball.draw(45); g_counter--; if (g_counter <= 0) clearInterval(g_timerDrawID); } Ball = function() {}; Ball.prototype = { draw : function(p_angle) { _ctx.beginPath(); _ctx.fillStyle = "#EEEEEE"; _ctx.fillRect(0, 0, 500, 300); _rotate = (_rotate + 1) % 360; _ctx.save(); _ctx.translate(_x, _y); _ctx.rotate(_rotate/180 * Math.PI); _ctx.translate(-16, -16); _ctx.drawImage(_img, 0, 0, _radius, _radius); _ctx.restore(); _x = _x - 0.8; _y = _y - 0.9; _rotate = _rotate + 4; }, init : function() { _x = 100; _y = 100; _radius = 32; _speed = 1; _rotate = 2; _img = new Image(); _img.src = "magic_ball.png"; _canvas = document.getElementById('testCanvas'); if ( ! _canvas || ! _canvas.getContext ) return false; _ctx = _canvas.getContext('2d'); } }; </script> </body> </html> ?

■結果

(点小图查看大图)

点击图片看大图

(点小图查看大图)

点击图片看大图

大小: 6 KB

(点小图查看大图)

点击图片看大图

大小: 15.5 KB

查看图片附件