0

我有两个可见的画布，一个使用 drawImage，另一个用于从隐藏（缓冲区）画布复制像素。除了一切都是一样的，但是当我将对象移动一些非整数值时，对象开始结结巴巴。我怀疑复制像素时的地板是问题，但我想问一下如何做到这一点以产生与drawImage相同的结果？

我设置了jsfiddle。

（右侧的对象口吃）

复制像素的函数。

function draw2()
{
    var canvasData = ctx2.createImageData(canvas2.width, canvas2.height),
        cData = canvasData.data;

        for (var w = 0; w < imgToDraw.width; w++)
        {
            for (var h = 0; h < imgToDraw.height; h++)
            {
                if (elm.x + w < canvas2.width && elm.x + w > 0 &&
                    elm.y + h > 0 && elm.y + h < canvas2.height)
                {
                    var iData = (h * imgToDraw.width + w) * 4;
                    var pData = (Math.floor(elm.x + w) + Math.floor(elm.y + h) * canvas2.width) * 4;

                    cData[pData] = imagePixData[iData];
                    cData[pData + 1] = imagePixData[iData + 1];
                    cData[pData + 2] = imagePixData[iData + 2];
                    cData[pData + 3] = imagePixData[iData + 3];
                }
            }
        }    
    ctx2.putImageData(canvasData, 0, 0);    
}

我怀疑第 14 行（jsfiddle 第 102 行）：

var pData = (~~ (elm.x + w) + ~~ (elm.y + h) * canvas2.width) * 4;

我可以使用 Math.round 或 Math.ceil 而不是 ~~ 来获得所需的结果，但我不知道哪个会更好或 drawImage 如何处理这个？

@Loktar 的原始代码 - stackoverflow。

4

0 回答 0