我一直在试图弄清楚如何缩放图像/图案来填充画布的高度, 但是使用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
});
答案 0 :(得分:0)
我解决了我的问题:
<img src="image.jpg" style="width: auto; height: 100%;" alt="" />
并使用它来获得适当的尺寸。