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

时间:2013-04-08 21:57:03

标签: javascript jquery canvas jcanvas

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

1 个答案:

答案 0 :(得分:0)

我解决了我的问题:

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

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