HTML5画布rotate旋转 scale缩放 translate平移

时间：5年前阅读：4074

1、画布旋转rotate

<!DOCTYPE html>    
<html>    
	<head>    
		<meta charset="UTF-8">    
		<title></title>    
		<style type="text/css">    
			canvas{    
				background: #272822;    
			}    
		</style>    
	</head>    
	<body>    
		<canvas id="canvas" width="800" height="500"></canvas>    
		<script type="text/javascript">    
			var canvas = document.getElementById('canvas');    
			var cv = canvas.getContext('2d');    
			cv.strokeStyle = 'yellow';    
			cv.lineWidth = 10;    
//			设置一个空心的正方形    
//			距离左边是10,是面是10,大小100X100    
			cv.strokeRect(300,200,100,100);    
//			rotate旋转  30度  (旋转 是旋转 整个画布30度出来的结果)    
			cv.rotate(30*Math.PI/180);    
			cv.strokeRect(300,200,100,100);			
    
		</script>    
	</body>    
</html>

2、scale缩放画布

<!DOCTYPE html>    
<html>    
	<head>    
		<meta charset="UTF-8">    
		<title></title>    
		<style type="text/css">    
			canvas{    
				background: #272822;    
			}    
		</style>    
	</head>    
	<body>    
		<canvas id="canvas" width="800" height="500"></canvas>    
		<script type="text/javascript">    
			var canvas = document.getElementById('canvas');    
			var cv = canvas.getContext('2d');    
			cv.strokeStyle = 'yellow';    
			cv.lineWidth = 10;    
//			设置一个空心的正方形    
//			距离左边是0,是面是0,大小100X100    
			cv.strokeRect(0,0,100,100);    
//			scale缩放画布    #####和原来一样大小是1(100%) ，2就是原来的2倍(200%)，宽、高    连边框大小也跟着变大    
			cv.scale(2,2);    
			cv.strokeRect(0,0,100,100);    
//			scale再缩放画布    
			cv.scale(2,2);    
			cv.strokeRect(0,0,100,100);			
    
		</script>    
	</body>    
</html>

3、translate平移

<!DOCTYPE html>    
<html>    
	<head>    
		<meta charset="UTF-8">    
		<title></title>    
		<style type="text/css">    
			canvas{    
				background: #272822;    
			}    
		</style>    
	</head>    
	<body>    
		<canvas id="canvas" width="800" height="500"></canvas>    
		<script type="text/javascript">    
			var canvas = document.getElementById('canvas');    
			var cv = canvas.getContext('2d');    
			cv.strokeStyle = 'yellow';    
			cv.lineWidth = 10;    
//			设置一个空心的正方形    
//			距离左边是10,是面是10,大小100X100    
			cv.strokeRect(10,10,100,100);    
//			translate  平移    向左移200，向下移200    
			cv.translate(200,200);    
			cv.strokeRect(10,10,100,100);			
    
		</script>    
	</body>    
</html>

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

HTML5画布rotate旋转 scale缩放 translate平移

网友评论