javascript - jCanvas - 拉伸图像以适应高度，并让它在宽度上流动

Question

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

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

我想模仿“背景大小：自动 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="" />

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