HTML5 Canvas API 学习笔记（二） -

pnhuang

浏览: 4904 次
性别:
来自: 上海

最近访客更多访客>>

jxqc_job

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

HTML5 Canvas API 学习笔记（二）

博客分类：

前端开发

canvas html5

离上一篇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>

分享到：