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

Question

例子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吗还是相对比例？这会改变画布的位置还是改变画笔的位置？这个方法会移动整个画布的起始点吗？

Answer 1

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);

效果如下：

按要求来就行了。

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