canvas学习之转换

1.scale()

<body>
	<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
		Your browser does not support the HTML5 canvas tag.
	</canvas>
	
	<script type="text/javascript">
		var c = document.getElementById('myCanvas');
		var ctx = c.getContext('2d');
		ctx.strokeRect(5,5,25,15);
		ctx.scale(2,2);
		ctx.strokeRect(5,5,25,15);		
	</script>
</body>

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

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

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

2.rotate()

<body>
	<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
		Your browser does not support the HTML5 canvas tag.
	</canvas>
	
	<script type="text/javascript">
		var c = document.getElementById('myCanvas');
		var ctx = c.getContext('2d');
		ctx.rotate(20*Math.PI/180);
		ctx.fillRect(50,20,100,50);
		
	</script>

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

context.rotate(angle);
参数描述
angle

旋转角度,以弧度计。

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

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

3.translate()

<body>
	<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
		Your browser does not support the HTML5 canvas tag.
	</canvas>
	
	<script type="text/javascript">
		var c = document.getElementById('myCanvas');
		var ctx = c.getContext('2d');
		ctx.fillRect(10,10,100,50);
		ctx.translate(70,70);
		ctx.fillRect(10,10,100,50);
		
	</script>
</body>

translate() 方法重新映射画布上的 (0,0) 位置。

注释:当您在 translate() 之后调用诸如 fillRect() 之类的方法时,值会添加到 x 和 y 坐标值上。

context.translate(x,y);

4.transform()

<body>
	<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
		Your browser does not support the HTML5 canvas tag.
	</canvas>
	
	<script type="text/javascript">
		var c = document.getElementById('myCanvas');
		var ctx = c.getContext('2d');
		ctx.fillStyle = 'yellow';
		ctx.fillRect(0,0,250,100);
		ctx.transform(1,0.5,-0.5,1,30,10);
		ctx.fillStyle = 'red';
		ctx.fillRect(0,0,250,100);
		ctx.transform(1,0.5,-0.5,1,30,10);
		ctx.fillStyle = 'blue';
		ctx.fillRect(0,0,250,100);
	</script>
</body>

画布上的每个对象都拥有一个当前的变换矩阵。

transform() 方法替换当前的变换矩阵。它以下面描述的矩阵来操作当前的变换矩阵:

a  c  e
b  d  f
0  0  1

换句话说,transform() 允许您缩放、旋转、移动并倾斜当前的环境。

注释:该变换只会影响 transform() 方法调用之后的绘图。

注释:transform() 方法的行为相对于由 rotate(), scale(), translate(), or transform() 完成的其他变换。例如:如果您已经将绘图设置为放到两倍,则 transform() 方法会把绘图放大两倍,您的绘图最终将放大四倍。

context.transform(a,b,c,d,e,f);
参数描述
a水平缩放绘图
b水平倾斜绘图
c垂直倾斜绘图
d垂直缩放绘图
e水平移动绘图
f垂直移动绘图

5.setTransform()

<body>
	<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
		Your browser does not support the HTML5 canvas tag.
	</canvas>
	
	<script type="text/javascript">
		var c = document.getElementById('myCanvas');
		var ctx = c.getContext('2d');
		ctx.fillStyle = 'yellow';
		ctx.fillRect(0,0,250,100);
		ctx.setTransform(1,0.5,-0.5,1,30,10);
		ctx.fillStyle = 'red'; //红色矩形不会显示
		ctx.fillRect(0,0,250,100);
		ctx.setTransform(1,0.5,-0.5,1,30,10);
		ctx.fillStyle = 'blue';
		ctx.fillRect(0,0,250,100);
	</script>
</body>

画布上的每个对象都拥有一个当前的变换矩阵。

setTransform() 方法把当前的变换矩阵重置为单位矩阵,然后以相同的参数运行 transform()

换句话说,setTransform() 允许您缩放、旋转、移动并倾斜当前的环境。

注释:该变换只会影响 setTransform() 方法调用之后的绘图。

context.setTransform(a,b,c,d,e,f);
参数描述
a水平旋转绘图
b水平倾斜绘图
c垂直倾斜绘图
d垂直缩放绘图
e水平移动绘图
f

垂直移动绘图


阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页