HTML5 Canvas API 学习笔记（二）

最新推荐文章于 2024-08-26 10:36:21 发布

pnhuang

最新推荐文章于 2024-08-26 10:36:21 发布

阅读量165

点赞数

分类专栏：前端开发文章标签： canvas html5

本文链接：https://blog.csdn.net/pnhuang/article/details/84051107

版权

前端开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

pnhuang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 Canvas API 学习笔记（二）

离上一篇Canvas学习笔记已由两个月之久，由于工作太忙，所以吧HTML5的学习也放了放。由于过两天要参加一个HTML5游戏开发的活动，为了多了解一点Canvas，今天又研究了一下Canvas的两个方法，文章水平属于初学者，如果哪里说的不对，欢迎大家指出。今天总结的两个方法，分别是translate()和rotate()。这两个方法也比较简单，就简单总结下好了。首先是transla...
复制链接

扫一扫