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)
从上图可以发现图片放大 2 倍, 相对画布的 x,y 轴坐标也放大了两倍, 这显然不是我们想要的, 所以在渲染图片的时候设置的 x,y 应该要对应的缩小 2 倍, 这样就可以抵消对应的缩放值了
- var img = document.getElementById('img')
- var canvas = document.getElementById('canvas')
- var ctx = canvas.getContext("2d")
- ctx.scale(2, 2)
- ctx.drawImage(img, 20 / 2, 20 / 2);
再结合 canvas 旋转的方法, 封装一个可以旋转缩放的方法:
- /**
- * @param ctx: 画布
- * @param img: 图片
- * @param x 最终渲染 x 轴坐标
- * @param y 最终渲染 y 轴坐标
- * @param width 图片原始 w
- * @param height 图片原始 h
- * @param scale 缩放比例
- * @param rotate 旋转角度
- */
- function canvas (ctx, img, x, y, width, height, scale, rotate) {
- width *= scale
- height *= scale
- // 切换画布中心点 -> 旋转画布 -> 切回画布原来中心点 // 此时画布已经旋转过
- ctx.translate(x + width / 2, y + height / 2);
- ctx.rotate(rotate / 180 * Math.PI, rotate / 180 * Math.PI);
- ctx.translate(-(x + width / 2), -(y + height / 2));
- // 放大
- ctx.scale(scale, scale);
- ctx.drawImage(img, x / scale, y / scale); // 不放大 x 和 y
- // 缩回原来大小
- ctx.scale(1 / scale, 1 / scale);
- // 切换画布中心点 -> 旋转画布 -> 切回画布原来中心点 // 将画布旋转回之前的角度
- ctx.translate(x + width / 2, y + height / 2);
- ctx.rotate(-rotate / 180 * Math.PI, -rotate / 180 * Math.PI);
- ctx.translate(-(x + width / 2), -(y + height / 2));
- }
这篇文章讲的是在图片缩放, canvas - 旋转有写的不好或错误的地方, 望指出
来源: https://www.cnblogs.com/suyuanli/p/8486017.html