canvas-缩放

小说:罗李华:水瓶座2016年运势作者:安龙邓纯更新时间:2019-03-25字数:81109

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)

canvas-缩放图1
canvas-缩放图2
从上图可以发现图片放大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-缩放图3

再结合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-旋转。有写的不好或错误的地方,望指出

当前文章:http://leetaemin.cn/ask/question_20719.html

发布时间:2019-03-25 02:41:11

专访诺心创始人张岚:安心美味的蛋糕故事 文字艺术优化(文字优化) 家居风水好,财运滚滚来(家居风水简单学) 当朋友不听劝,我该怎么办? 给爱的女人买对的礼物到底有多重要 信念疗法 让你生活更积极 杨绛先生送给年轻人的9句话,值得一读再读! 双眼皮贴的危害,你知道多少? 激荡三十年,90后眼中的邓小平 几张图让你读懂引力波是什么!

28489 41672 86525 92667 30239 49606 91785 81968 84788 13438 83909 94892 90077 19046 16505 19362 61708 19720 21604 57941 44792 19385 58628

我要说两句: (0人参与)

发布