为了账号安全,请及时绑定邮箱和手机立即绑定

scale(sx,sy)这个方法会移动整个画布的起始点吗?

scale(sx,sy)这个方法会移动整个画布的起始点吗?

萧十郎 2022-07-08 15:07:58
例子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,

1234var 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方法移动原点就行了,比如起点要求不变,就这样:

12345var ctx=drawing.getContext("2d");    ctx.strokeRect(20,20,20,20);    ctx.translate(-20,-20);    ctx.scale(2,2);    ctx.strokeRect(20,20,20,20);

效果如下:

按要求来就行了。

希望可以帮到你~~~~~


查看完整回答
反对 回复 2022-07-11

添加回答

代码语言

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信