[英]Html5 Canvas: alternative for drawImage()
由於我使用畫布的默認scale()函數遇到了一些舍入問題*,因此我為畫布實現了自己的矩陣轉換。 僅有一個例外,這可以正常工作,我無法旋轉圖像,因為只能使用圖片的左上角對drawImage()函數進行參數化。
還有其他方法可以在畫布上繪制圖像嗎? 至少可以使用左上角,右上角和右下角的坐標進行參數化的方法,以便可以手動旋轉坐標?
*問題是縮放比例小於1的形狀之間存在一像素的間隙。
基於注釋中的小提琴,您可以使用內存中的畫布作為后緩沖區以正常大小繪制所需的內容,然后縮放主畫布的上下文並使用drawImage
繪制縮放的結果。
var canvas = document.getElementById('c');
var context = canvas.getContext('2d');
var backBuffer = document.createElement("canvas"),
bCtx = backBuffer.getContext("2d");
paint = function (x, y, scale) {
bCtx.clearRect(0,0,backBuffer.width,backBuffer.height);;
bCtx.beginPath();
bCtx.rect(x, y, 30, 30);
bCtx.fillStyle = 'black';
bCtx.fill();
bCtx.beginPath();
bCtx.rect(x + 30, y, 30, 30);
bCtx.fillStyle = 'black';
bCtx.fill();
context.save();
context.scale(scale,scale);
context.drawImage(backBuffer,0,0);
context.restore();
}
paint(10, 10, 1);
paint(10, 70, .66);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.