由于我在 Canvas 的默认scale()函数中遇到了一些舍入问题*,我已经为 Canvas 实现了自己的矩阵转换。这工作正常,唯一的异常(exception)是,我无法旋转图像,因为 drawImage() 函数只能用图片的左上角进行参数化。
还有其他方法可以在 Canvas 上绘制图像吗?至少可以参数化顶部、左侧和右下角的坐标的方法?这样我就可以手动旋转坐标?
*问题是按 < 1 倍缩放后形状之间存在一个像素间隙。
最佳答案
根据评论中的 fiddle ,您可以使用内存 Canvas 作为后台缓冲区来以正常大小绘制所需的内容,然后缩放主 Canvas 的上下文并使用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 : alternative for drawImage(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24641042/