例子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);问题来了 scale(sx,sy)sx和sy是像素px吗还是相对比例?这会改变画布的位置还是改变画笔的位置?这个方法会移动整个画布的起始点吗?
1 回答
慕侠2389804
TA贡献1719条经验 获得超6个赞
sx和sy是个比例数字,比如设置scale(2,2),是在x方向和y方向都放大了两倍,出来的效果就是图像的缩放。画布的位置并没有改变。
你这样理解,scale是把坐标改变了相应的比例。还是以scale(2,2)为例。为了显示明显,给段css,
1234 | var ctx=drawing.getContext( "2d" ); ctx.strokeRect( 20 , 20 , 20 , 20 ); ctx.scale( 2 , 2 ); ctx.strokeRect( 20 , 20 , 20 , 20 ); |
效果如下:
scale(2,2)后,坐标变成了原来的两倍,所以同样的坐标图像的大小变成了之前的两倍。看坐标,起点同样是(20,20),但是变换以后变成了右下角,就是(40,40),很明显,是坐标尺度变了,一格变成了之前的两格,所以同样的起点也变成了(40,40)。
如果想要变换起点位置的话,就用translate方法移动原点就行了,比如起点要求不变,就这样:
12345 | var ctx=drawing.getContext( "2d" ); ctx.strokeRect( 20 , 20 , 20 , 20 ); ctx.translate( -20 , -20 ); ctx.scale( 2 , 2 ); ctx.strokeRect( 20 , 20 , 20 , 20 ); |
效果如下:
按要求来就行了。
希望可以帮到你~~~~~
添加回答
举报
0/150
提交
取消