Question

我一直在试图弄清楚如何缩放图像/图案来填充画布的高度，但是使用jCanvas去剪裁宽度。

我一直在尝试自己计算，但我在数学方面的糟糕技能并没有用。我也尝试过谷歌，但这也没有成功。

我想模仿“background-size：auto 100％;”

代码：

// this is the path
  function draw(patt) {
    that.$canvas.drawLine({
      layer: true,
      fillStyle: patt,
      name: 'myPath',
      x1: 0, y1: 0,
      x2: that.topPoint, y2: 0,
      x3: that.bottomPoint, y3: that.height,
      x4: 0, y4: that.height,
      closed: true
    });
  }


  // this is the image itself
  var patt = that.$canvas.createPattern({
    width: that.width,
    height: that.height,
    source: function(context) {
      $(this).drawImage({
        source: that.$laImg.attr('src'),
        x: 0, y: 0,
        fromCenter: false,
        width: that.width,
        height: that.height
      });
    },

    repeat: "repeat",
    load: draw
  });

Answer 1

我解决了我的问题：

<img src="image.jpg" style="width: auto; height: 100%;" alt="" />

并使用它来获得适当的尺寸。

jCanvas - 拉伸图像以适应高度，并使其在宽度上流动

1 个答案: