HTML5 Canvas API 学习札记（二）
日期：2014-05-17 浏览次数：20707 次
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，就是做一个自己旋转的轮子。
离上一篇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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
