javascript - HTML5 Canvas:drawImage()的替代方法

由于我使用画布的默认scale（）函数遇到一些舍入问题*，因此我为画布实现了自己的矩阵转换。仅有一个例外，这可以正常工作，我无法旋转图像，因为只能使用图片的左上角对drawImage（）函数进行参数化。

还有其他方法可以在画布上绘制图像吗？至少可以使用左上角，右上角和右下角的坐标进行参数化的方法，以便可以手动旋转坐标？

*问题是缩放后的形状之间的像素间隔为小于1。

最佳答案

基于注释中的小提琴，您可以使用内存中的画布作为后缓冲区以正常大小绘制所需的内容，然后缩放主画布的上下文并使用drawImage绘制缩放的结果。



Live Demo

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);

关于javascript - HTML5 Canvas:drawImage()的替代方法，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24641042/