可以用css3中“transform: scale()”属性对图片进行缩放。
1、新建html文档，在body标签中添加一张图片，给这张图片设置css属性，添加“tansform”缩放属性，属性值为“scaleX(n)”，scaleX(n)指的是对宽度进行缩放，n指的是缩放比例：
2、将transform的属性值改为“scaleY(n)”，scaleY(n)指的是对高度进行缩放，n指的是缩放比例：
3、将transform的属性值改为“scale(n)”，scale(n)指的是对图片的宽度和高度同时进行等比例缩放，n指的是缩放比例：
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)
效果如下：
按要求来就行了。
希望可以帮到你~~~~~
