HTML知识点总结——canvas变换

translate(x, y)
我们先介绍 translate 方法，它用来移动 canvas的原点到一个不同的位置。translate 方法接受两个参数。x 是左右偏移量，y 是上下偏移量，

在canvas中translate是累加的。

rotate(angle)
这个方法只接受一个参数：旋转的角度(angle)，它是顺时针方向的，以弧度为单位的值。旋转的中心点始终是 canvas 的原点，如果要改变它，我们需要用到 translate 方法。在canvas中rotate是累加的

scale(x, y)
scale 方法接受两个参数。x,y 分别是横轴和纵轴的缩放因子，它们都必须是正值。值比 1.0 小表示缩小，比 1.0 大则表示放大，值为 1.0 时什么效果都没有。缩放一般我们用它来增减图形在 canvas 中的像素数目，对形状，位图进行缩小或者放大。

	在canvas中scale是累乘的。

例子：canvas绘制一个动态时钟。
步骤：
1.初始化
将圆心调整到画布的中间
由于canvas中画圆与旋转所参照的坐标系于正常坐标系有出入
将整个画布逆时针旋转90度
初始化一些样式数据
ctx.lineWidth = 8;
ctx.strokeStyle = “black”;
ctx.lineCap = “round”;

2.外层空心圆盘
	圆盘颜色:#325FA2
	圆盘宽度:14
	圆盘半径:140
	
3.时针刻度
	长度为20
	宽度为8
	外层空心圆盘与时针刻度之间的距离也为20
	
4.分针刻度
	宽度为4
	长度为3
	
5.时针
	宽度为14
	圆心外溢出80 收20
	
6.分针
	宽度为10
	圆心外溢出112 收28
	
7.秒针
	颜色:D40000
	宽度为6
	圆心外溢出83 收30
	
	---->中心实心圆盘
		半径为10
	---->秒针头
		96码开外半径为10的空心圆
		宽度为6

代码：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;
				background: antiquewhite;
			}
			#clock{
				background: lightgray;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate3d(-50%,-50%,0);
			}
		</style>
	</head>
	<body>
		<canvas id="clock" width="400px" height="400px"></canvas>
	</body>
	
	<script type="text/javascript">
		window.onload =  function(){
			var clock = document.querySelector("#clock");
			if(clock.getContext){
				var ctx = clock.getContext("2d");
				
				setInterval(function(){
					ctx.clearRect(0,0,clock.width,clock.height);
					move();
				},1000);
				
				move();
				function move(){
					ctx.save();
				
					//外圆的初始化样式
					ctx.lineWidth = 8;
					ctx.strokeStyle = "black";
					ctx.lineCap = "round";
					
					//改变原点的位置
					ctx.translate(200,200);
					
					//将坐标轴逆时针旋转90度
					ctx.rotate(-90*Math.PI/180);
					
					ctx.beginPath();
					
					//外层空心圆盘
					ctx.save();
					ctx.strokeStyle = "#325FA2";
					ctx.lineWidth = 14;
					ctx.beginPath();
					ctx.arc(0,0,140,0,360*Math.PI/180);
					ctx.stroke();
					ctx.restore();
					
					//内层时针刻度
					ctx.save();
					for(var i = 0; i < 12; i++){
						ctx.rotate(30*Math.PI/180);
						ctx.beginPath();
						ctx.moveTo(100,0);
						ctx.lineTo(120,0);
						ctx.stroke();
					}
					
					ctx.restore();
					
					//分针刻度
					ctx.save();
					ctx.lineWidth = 4;
					
					for(var i = 0; i < 60; i++){
						//做判断，防止时针上再次与分针重合
						if(i%5 != 0){
							ctx.beginPath();
							ctx.moveTo(117,0);
							ctx.lineTo(120,0);
							ctx.stroke();
						}
						ctx.rotate(6*Math.PI/180);
					}
					
					ctx.restore();
					
					//时分秒针，表座
					//拿到时间
					var date = new Date();
					var s = date.getSeconds();
					var m = date.getMinutes() + s/60;
					var h = date.getHours() + m/60;
					h = h>12?h-12:h;  //24h制转换成12小时
					
					//时针
					ctx.save();
					ctx.lineWidth = 14;
					ctx.rotate(h*30*Math.PI/180);
					ctx.beginPath();
					ctx.moveTo(-20,0);
					ctx.lineTo(80,0);
					ctx.stroke();
					ctx.restore();
					
					//分针
					ctx.save();
					ctx.lineWidth = 10;
					ctx.rotate(m*6*Math.PI/180);
					ctx.beginPath();
					ctx.moveTo(-28,0);
					ctx.lineTo(112,0);
					ctx.stroke();
					ctx.restore();
					
					//秒针
					ctx.save();
					ctx.lineWidth = 6;
					ctx.strokeStyle = "#D40000";
					ctx.fillStyle = "#D40000";
					ctx.rotate(s*6*Math.PI/180);
					
					ctx.beginPath();
					ctx.moveTo(-30,0);
					ctx.lineTo(83,0);
					ctx.stroke();
					
						//表座
						ctx.beginPath();
						ctx.arc(0,0,10,0,360*Math.PI/180);
						ctx.fill();
						
						//秒头
						ctx.beginPath();
						ctx.arc(96,0,10,0,360*Math.PI/180);
						ctx.stroke();
						ctx.restore();
					
					ctx.restore();
				}
			}
		}
		
	</script>
</html>

运行截图：
HTML知识点总结——canvas变换