html5 canvas学习--移动坐标和旋转坐标

最新推荐文章于 2024-06-30 12:42:30 发布

xiaopengyaonixi

最新推荐文章于 2024-06-30 12:42:30 发布

阅读量5.7k

点赞数

分类专栏： Html5

Html5 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script type="text/javascript">
		function drawTop(ctx,fillStyle){
			ctx.fillStyle = fillStyle;
			ctx.beginPath();
			ctx.arc(0,0,30,0,Math.PI,true);
			ctx.closePath();
			ctx.fill();
		}

		function drawGrip(ctx){
			ctx.save();
			ctx.fillStyle="blue";
			ctx.fillRect(-1.5,0,1.5,40);
			ctx.beginPath();
			ctx.strokeStyle="blue";
			ctx.arc(-5,40,4,Math.PI,Math.PI*2,true);
			ctx.stroke();
			ctx.closePath();
			ctx.restore();
		}

		function draw(){
			var ctx = document.getElementById('myCanvas').getContext("2d");
			// 注意所有的移动都是基于这个上下文
			ctx.translate(150,150);
			for(var i=1;i<9;i++){
				ctx.save();
				// 设置旋转
				ctx.rotate(Math.PI*(2/4+i/4));
				// 设置偏移
				ctx.translate(0,-100);
				// 设置缩放
				ctx.scale(1*(i/8),1*(i/8));
				drawTop(ctx,"rgb("+(30*i)+","+(255-30*i)+",255)");
				drawGrip(ctx);
				ctx.restore();
			}
		}

		window.onload = function(){
			draw();
		}

	</script>
</head>
<body>
	<canvas id="myCanvas" width="700" height="300"></canvas>
</body>
</html>