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 id="canvas" width="200" height="200"></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>
页:
[1]