拉伸 scale

scale(x, y)

我们用它来增减图形在 canvas 中的像素数目,对形状,位图进行缩小或者放大,。

scale方法接受两个参数。x,y分别是横轴和纵轴的缩放因子,它们都必须是正值。值比 1.0 小表示缩 小,比 1.0 大则表示放大,值为 1.0 时什么效果都没有。

举例说,如果canvas 的 1 单位就是 1 个像素。我们设置缩放因子是 0.5,1 个单位就变成对应 0.5 个像素,这样绘制出来的形状就会是原先的一半。同理,设置为 2.0 时,1 个单位就对应变成了 2 像素,绘制的结果就是图形放大了 2 倍。

ctx.save()
ctx.translate(120, 120)
ctx.strokeStyle = '#f00'
ctx.strokeRect(0,0,50,100)
ctx.scale(.5, .5)
ctx.fillStyle = '#0f0'
ctx.fillRect(0,0,50,100)
ctx.restore()

TIP

同样的,缩放中心默认也是坐标原点,需要配合 translate 实现围绕元素的中心进行旋转。

只要在缩放、旋转或者组合旋转缩放前将原点平移到形状的中心,都可以得到想要的效果。记住,任何形状的中心点都是半宽的x值和半高的y值。这需要使用边界框理论找到中心点。

坐标变换中的缩放可以用于实现很多不同的效果,比如说,在绘制了某个图形后,可以调用ctx.scale(-1, 1)来绘制其水平镜像或者调用ctx.scale(1, -1)来绘制其垂直镜像。

    let canvas = document.getElementById('canvas')
    window.addEventListener('load', draw(canvas), false);
    function draw(canvas) {
      let ctx = canvas.getContext('2d')
      ctx.save();
      ctx.strokeStyle = '#f36';
      ctx.beginPath();
      ctx.moveTo(100, 100);
      ctx.lineTo(150, 150);
      ctx.lineTo(100, 200);
      ctx.closePath();
      ctx.stroke();
      ctx.translate(350, 0);
      ctx.strokeStyle = 'lime';
      ctx.beginPath();
      ctx.moveTo(-175, 0.5);
      ctx.lineTo(-175, 300.5);
      ctx.stroke();
      ctx.scale(-1, 1);
      ctx.save();
      ctx.strokeStyle = '#000';
      ctx.beginPath();
      ctx.moveTo(100, 100);
      ctx.lineTo(150, 150);
      ctx.lineTo(100, 200);
      ctx.closePath();
      ctx.stroke();
    }

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress