Question

HTML5 canvas scale（）的参数问题

例子
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,

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

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

效果如下：

按要求来就行了。

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

追答

关于什么位置啥的转换过来就行了

嗯，也对，可以用save，restore—.—