HTML5学习第19篇——旋转与缩放

最新推荐文章于 2022-01-23 15:53:10 发布

水晶果冻1125

最新推荐文章于 2022-01-23 15:53:10 发布

阅读量555

点赞数 1

分类专栏： # HTML5 文章标签： html5 旋转缩放

本文链接：https://blog.csdn.net/m0_37617778/article/details/84974449

版权

HTML5 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

1、旋转

方法

rotate() 方法旋转当前的绘图。

JavaScript 语法：

context.rotate(angle);

参数值

参数	描述
angle	旋转角度，以弧度计。如需将角度转换为弧度，请使用 degreesMath.PI/180 公式进行计算。举例：如需旋转 5 度，可规定下面的公式：5Math.PI/180。

参数

描述

angle

旋转角度，以弧度计。

如需将角度转换为弧度，请使用 degrees*Math.PI/180 公式进行计算。

举例：如需旋转 5 度，可规定下面的公式：5*Math.PI/180。

示例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>canvas 旋转rotate</title>
	<style type="text/css">
		canvas{
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<canvas width="800" height="600"></canvas>
	<script type="text/javascript">
		var c = document.querySelector('canvas');
		var ctx = c.getContext("2d");

		/*旋转是以坐标系的原点（0，0）为圆心进行的顺时针旋转。所以，
        在使用rotate()之前，通常需要配合使用translate()平移坐标系，确定旋转的圆心。
        即，旋转变换通常搭配平移变换使用的。*/

		/*最后一点需要注意的是，Canvas是基于状态的绘制，所以每次旋转都是接着上次旋转的基础上
        继续旋转，所以在使用图形变换的时候必须搭配save()与restore()方法，一方面重置旋转角度，
        另一方面重置坐标系原点。*/
		ctx.save();
		ctx.translate(100,100);
		ctx.fillRect(0,0,100,100);
		

		ctx.rotate(Math.PI/9);
		ctx.fillStyle = "blue";
		ctx.fillRect(0,0,100,100);
		ctx.restore();
	</script>	
</body>
</html>

效果：

2、缩放

定义和用法

scale() 方法缩放当前绘图，更大或更小。

注释：如果您对绘图进行缩放，所有之后的绘图也会被缩放。定位也会被缩放。如果您 scale(2,2)，那么绘图将定位于距离画布左上角两倍远的位置。

JavaScript 语法：

context.scale(scalewidth,scaleheight);

参数值

参数	描述
scalewidth	缩放当前绘图的宽度 (1=100%, 0.5=50%, 2=200%, 依次类推)
scaleheight	缩放当前绘图的高度 (1=100%, 0.5=50%, 2=200%, etc.)

示例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>canvas 缩放scale</title>
	<style type="text/css">
		canvas{
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<canvas width="600" height="400"></canvas>
</body>
<script type="text/javascript">
	var c = document.querySelector('canvas');
	var ctx = c.getContext("2d");

	ctx.strokeRect(5,5,20,10);
	ctx.scale(2,2);
	ctx.strokeRect(5,5,20,10);
	ctx.scale(2,2);
	ctx.strokeRect(5,5,20,10);
	ctx.scale(2,2);
	ctx.strokeRect(5,5,20,10);

	//ctx.stroke();
</script>
</html>

水晶果冻1125

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5学习第19篇——旋转与缩放

1、旋转方法rotate() 方法旋转当前的绘图。 JavaScript 语法： context.rotate(angle);参数值参数描述 angle 旋转角度，以弧度计。如需将角度转换为弧度，请使用 degrees*Math.PI/180 公式进行计算。举例：如需旋转 5 度，可规定下面的公式：5*Math.PI/180。 ...
复制链接

扫一扫