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

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="" /> 

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