HTML5 Canvas 学习日志(二)

HTML5 Canvas 学习日志(二)

Canvas的属性的保存和读取

<!DOCTYPE>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html"; charset="UTF-8">
		<title>Canvas: Save And Restore</title>
		<script type="text/javascript" src="jquery-1.11.1.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				var canvas = $("#mycanvas");
				var context = canvas.get(0).getContext("2d");
				
				//平移
				context.translate(100,100);
				//设置全局透明度
				context.globalAlpha=0.5;
				context.fillStyle = "rgb(0, 0, 200)";
				//保存状态
				context.save(); 
				
				context.fillRect(40, 40, 30, 30);
				
				context.fillStyle = "rgb(225,0,0)";
				context.rotate(Math.PI/4); //旋转
				context.fillRect(80, 40, 30, 30);
				
				//读取保存的状态
				context.restore();
				context.scale(2,5); //缩放
				
				context.fillRect(120, 40, 30, 30);
			});
		</script>
	</head>
	
	<body>
		<canvas id="mycanvas" width="500" height="500" style="background:#000000;"></canvas>
	</body>
</html>



你可能感兴趣的:(HTML5 Canvas 学习日志(二))