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>
原文链接
相关文章
精彩导读
热门资讯
关注我们
