canvas整体放大_canvas-缩放

Canvas-图片缩放

由上一篇canvas-旋转的例子可以了解到canvas的一些特性，不熟悉的同学可以先去看看canvas-旋转。

我们在将图片引入canvas时，图片会一原始像素渲染。这样往往不是我们想要的大小。这时就要用到canvas的scale(x, y)方法：如果您对绘图进行缩放，所有之后的绘图也会被缩放。定位也会被缩放。如果您 scale(2,2)，那么绘图将定位于距离画布左上角两倍远的位置。这里就会有个问题，我们在用drawImage(img,10,10)方法的时候，x, y坐标也会更具scale的缩放而改变。

例如：

// 这里是正常渲染图片

var img = document.getElementById('img')

var canvas = document.getElementById('canvas')

var ctx = canvas.getContext("2d")

ctx.drawImage(img, 20, 20)

// 放大2倍后

var img = document.getElementById('img')

var canvas = document.getElementById('canvas')

var ctx = canvas.getContext("2d")

ctx.scale(2, 2)

ctx.drawImage(img, 20, 20)

从上图