1949啦网--小小 痛苦,是因为能力和欲望不匹配造成的

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

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/post/7497.html

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

微信扫码关注

更新实时通知

作者:xialibing 分类:网页教程 浏览: