[英]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.