1

幅と高さがパーセンテージのキャンバスがあり、そこに画像を描いています。

キャンバスの幅 50%、高さ 100% で画像を描画したいと思います。どうすればこれを達成できますか?

ここにいくつかのコードがあります：

#canvas {
     width: 100%;
     height: 33%;
}

var cv = document.getElementById('canvas');
var cx = cv.getContext('2d');

var bg = document.createElement('img');
bg.src = bg_url;

cx.drawImage(bg, ?, ?, ?, ?);
// cx.drawImage(bg, 0, 0, 50%, 100%); essentially

// now let's draw that second image at 50% of the canvas (tiling)

cx.drawImage(bg, ?, ?, ?, ?);
// cx.drawImage(bg, 50%, 0, 50%, 100%); essentially
4

1 に答える 1

1

位置と寸法を指定するときに canvas.drawImage() が使用する単位は何ですか?

CSS pixelsすべての次元に使用します。

これ：

#canvas {
     width: 100%;
     height: 33%;
}

キャンバスを画像としてスケーリングするだけです。キャンバスのピクセル寸法は同じままで、結果の品質が低下します。原則として、canvas 要素には常に絶対サイズを設定します (設定しない場合、CSS で設定した値に関係なく、サイズは常に 300 x 150 ピクセルになります)。

var canvas = document.getElementById('canvasID');

canvas.width = window.innerWidth;        // use the target size instead if
canvas.height = window.innerHeight * 33; // not the window

その後：

cx.drawImage(bg, 0, 0, canvas.width * 0.5, canvas.height);
于 2013-10-17T18:59:03.417 に答える