html5 canvas api chm,HTML5,Canvas,API,学习札记（二）,html5 canvas a_H5之家

html5 canvas api chm,HTML5,Canvas,API,学习札记（二）,html5 canvas api htm,canvas api

html5 canvas api chm,HTML5,Canvas,API,学习札记（二）,html5 canvas api htm,canvas apiHTML5 Canvas API 学习笔记（二）离上一篇Canvas学习笔记已由两个月之久，由于工作太忙，所以吧HTML5的学习也放了放。由于过两天要参

HTML5 Canvas API 学习笔记（二）
离上一篇Canvas学习笔记已由两个月之久，由于工作太忙，所以吧HTML5的学习也放了放。由于过两天要参加一个HTML5游戏开发的活动，为了多了解一点Canvas，今天又研究了一下Canvas的两个方法，文章水平属于初学者，如果哪里说的不对，欢迎大家指出。

今天总结的两个方法，分别是translate()和rotate()。这两个方法也比较简单，就简单总结下好了。

首先是translate(x, y)方法，即将Canvas原点分别向水平方向和垂直方向分别平移x, y，成为新的原点。初始原点的位置是在Canvas的左上角。

然后是rotate(arc)方法，即将Canvs中的对象绕着原点位置旋转arc弧度，如果要旋转5°，可以将arc设置为 5*Math.PI/180 即可。

这两个方法都比较简单，所以也做了一个简单的demo，就是做一个自己旋转的轮子。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Wheel</title> </head> <body> <canvas></canvas> <script type="text/javascript"> (function () { var canvas = document.getElementById("canvas"), context2D = canvas.getContext("2d"), FPS = 20, HALFWIDTH = canvas.width / 2, HALFHEIGHT = canvas.height / 2, PI = Math.PI, init, draw; init = function () { context2D.translate(HALFWIDTH, HALFHEIGHT); window.setInterval(function () { context2D.clearRect(0, 0, canvas.width, canvas.height); context2D.rotate(5 * PI / 180); draw(); }, 1000 / FPS); }; draw = function () { context2D.beginPath(); context2D.arc(0, 0, 50, 0, 2 * PI); context2D.fillStyle = "yellow"; context2D.fill(); context2D.closePath(); context2D.beginPath(); context2D.moveTo(0, -50); context2D.lineTo(0, 50); context2D.strokeStyle = "red"; context2D.stroke(); context2D.closePath(); context2D.beginPath(); context2D.moveTo(-50, 0); context2D.lineTo(50, 0); context2D.strokeStyle = "red"; context2D.stroke(); context2D.closePath(); }; window.onload = init; })(); </script> </body> </html>