30 canvas中的变换

最新推荐文章于 2024-08-11 18:03:48 发布

丨Anna丨

最新推荐文章于 2024-08-11 18:03:48 发布

阅读量207

点赞数

分类专栏： # canvas 前端重拾文章标签： canvas

本文链接：https://blog.csdn.net/u014331138/article/details/109355473

版权

前端重拾同时被 2 个专栏收录

42 篇文章 0 订阅

订阅专栏

canvas

14 篇文章 0 订阅

订阅专栏

30 canvas中的变换

语法

	translate(x, y)
		我们先介绍 translate 方法，它用来移动 canvas的原点到一个不同的位置。
		translate 方法接受两个参数。x 是左右偏移量，y 是上下偏移量，
		
		在canvas中translate是累加的

	rotate(angle)
		这个方法只接受一个参数：旋转的角度(angle)，它是顺时针方向的，以弧度为单位的值。
		旋转的中心点始终是 canvas 的原点，如果要改变它，我们需要用到 translate 方法
		
		在canvas中rotate是累加的
		
	scale(x, y)
		scale 方法接受两个参数。x,y 分别是横轴和纵轴的缩放因子，它们都必须是正值。
		值比 1.0 小表示缩小，比 1.0 大则表示放大，值为 1.0 时什么效果都没有。
		缩放一般我们用它来增减图形在 canvas 中的像素数目，对形状，位图进行缩小或者放大。
		
		在canvas中scale是累称的

1 平移

示例

	<head>
		<meta charset="UTF-8">
		<title>11_canvas中的变换平移</title>
		<style>
			#test{
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				background-color: #BBAAFF;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="300" height="300">您的浏览器不支持canvas，请升级</canvas>
		<script type="application/javascript">
			var canvas = document.querySelector("#test");
			if(canvas.getContext){
				var ctx = canvas.getContext("2d");
				ctx.fillRect(0,0,50,50);
				ctx.translate(100,100);
				ctx.fillRect(0,0,50,50);
			}
		</script>
	</body>

效果

结论

canvas的变换区别于CSS变化，canvas的变换变化的是canvas坐标原点的位置。如上图所示，相当于原点由位置1变换到了位置2

2 旋转

示例

	<head>
		<meta charset="UTF-8">
		<title>12_canvas中的变换旋转</title>
		<style>
			#test{
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				background-color: #BBAAFF;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="300" height="300">您的浏览器不支持canvas，请升级</canvas>
		<script type="application/javascript">
			var canvas = document.querySelector("#test");
			if(canvas.getContext){
				var ctx = canvas.getContext("2d");
				ctx.fillRect(0,0,50,50);
				ctx.rotate(45*Math.PI/180);
				ctx.fillRect(100,0,50,50);
			}
		</script>
	</body>

效果

结论

与canvas平移一样，canvas旋转变化的实际是canvas坐标轴

3 放大

示例

	<head>
		<meta charset="UTF-8">
		<title>12_canvas中的变换放大</title>
		<style>
			#test{
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				background-color: #BBAAFF;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="300" height="300">您的浏览器不支持canvas，请升级</canvas>
		<script type="application/javascript">
			var canvas = document.querySelector("#test");
			if(canvas.getContext){
				var ctx = canvas.getContext("2d");
				ctx.fillRect(0,0,50,50);
				ctx.scale(2,2);
				ctx.fillRect(100,100,50,50);
			}
		</script>
	</body>

效果