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

【问题标题】：jCanvas - Stretching image to fit height, and letting it flow over in widthjCanvas - 拉伸图像以适应高度，并让它在宽度上流动
【发布时间】：2013-04-10 21:49:45
【问题描述】：

我一直在试图弄清楚如何缩放图像/图案以填充画布的高度，但是使用 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
  });

【问题讨论】：

标签： javascript jquery canvas jcanvas

【解决方案1】：

我通过这个解决了我的问题：

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

并使用它来获得正确的尺寸。

【讨论】：