canvas变换

<!--
		canvas变换
		translate(x,y)  移动原点到一个不同的位置(累加的)
		rotate(angle)  (angle参数是弧度,顺时针方向) 旋转的中心点是canvas的原点(translate来改变原点)
		
		scale(x,y)  两个参数,横轴竖轴的缩放因子 
		-->
	    <style type="text/css">
			#test{
     
				background-color: #008000;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="300" height="300"></canvas>
		<script type="text/javascript">
			window.onload=function(){
     
				/***************arc(100,100,20,0,(Math.PI/180)*90,false)********/
				var canvas = document.querySelector("#test")
				var ctx = canvas.getContext("2d")
				ctx.translate(50,50)
				ctx.rotate(45*Math.PI/180)  //按照50,50的点转45度
				ctx.scale(1.5,1.5)
				ctx.beginPath()
				ctx.fillRect(0,0,100,100)
			
			}
		</script>
		
	</body>

canvas变换_第1张图片canvas变换_第2张图片canvas变换_第3张图片

你可能感兴趣的:(html5)