我使用多个drawimage将图像blitting到上下文以在y轴上获得非线性插值。 这是我的代码的一个非常简化的版本。
var destY = 0;
for (i=0; i<16; i++)
{
context.drawImage(pictureToBlit,
0, i, 16, 1,
0,destY,512,i*3);
destY+=i*3;
}
当pictureToBlit是来自DOM的图像时,此代码会在所有浏览器上生成预期的双线性插值。
请参阅此jsfiddle
但是当pictureToBlit是一个非屏幕上下文(CanvasRenderingContext2D)时,最新版本的Chrome 40.0.2214.94 m上的结果会有所不同:
查看相同的jsfiddle并将if(true)替换为if(false)
当源是包含相同图像的图像或屏幕外画布时,为什么图像绘制的行为会有所不同?