是否可以控制画布纹理高档行为？

Question

在画布中升级纹理时，浏览器的行为差别很大。

这是一个小提琴，创建一个2x1纹理（由一个黑色和一个白色纹素组成）并将其应用于256x128px矩形：https://jsfiddle.net/ozirus/x1c3m50o/

Microsoft.AspNet.SignalR.Client

以下屏幕截图展示了在不同浏览器中运行时的结果。

在Chrome中：

在Firefox中：

在IE11 / Edge中：

是否有任何标记/选项可用于控制此行为并使其更加一致？

IE / Edge 行为，其中最后一个像素是包装/重复插值的结果，这是我实际尝试解决的主要问题。

PS：我知道一些可以解决问题的解决方法（半纹理偏移+向上扩展，纹理上的透明边框，......）但是如果可能的话我宁愿配置这种行为。

编辑：正如@Ryan在评论中所指出的，var texture = ... var ctx = document.createElement("canvas").getContext("2d"); ctx.canvas.width = 512; ctx.canvas.height = 512; document.body.appendChild(ctx.canvas); ctx.setTransform(128, 0, 0, 128, 0, 0); ctx.fillStyle = ctx.createPattern(texture, "no-repeat");; ctx.rect(0, 0, 2, 1); ctx.fill("evenodd"); 属性可用于在最近邻居模式中具有匹配行为，但我想保持纹理的平滑插值

Answer 1

没有

没有办法从javascript访问2D API（CPU和GPU）背后的代码。该标准有很多漏洞，因此浏览器开发人员可以解释它，但它适合它们。

如果你使用“重复”，你将在所有3个浏览器上获得与Edge上“no-repeat”相同的结果。

On Edge，Firefox和Chrome with

ctx.fillStyle = ctx.createPattern(textureCanvas, "repeat");;

如果您希望结果与FF类似，请使用ctx.drawImage渲染位图。如果你想要不规则的形状，那么使用ctx.drawImage然后使用路径和ctx.globalCompositeOperation = "destination-in"进行渲染。如果需要渲染到现有画布内容，则使用第二个画布渲染位图和蒙版，然后将该画布渲染到现有内容上。

On Edge，Firefox和Chrome with

ctx.drawImage(textureCanvas,0,1,2,1);

如果您想在所有3种浏览器上获得与Chrome相同的结果，则需要在图像周围添加一个像素透明边框，然后渲染2像素中心。

下面示例中的Firefox，Edge和chrome的相同结果（从您的小提琴https://jsfiddle.net/ozirus/x1c3m50o/复制和修改）

var textureCanvas = document.createElement("canvas");
textureCanvas.width = 4;
textureCanvas.height = 3;
var textureContext = textureCanvas.getContext("2d");
var imgData = textureContext.createImageData(4, 3);
var i = 20;
imgData.data[i++] = 0;
imgData.data[i++] = 0;
imgData.data[i++] = 0;
imgData.data[i++] = 255;
imgData.data[i++] = 255;
imgData.data[i++] = 255;
imgData.data[i++] = 255;
imgData.data[i++] = 255;
textureContext.putImageData(imgData, 0, 0);

var ctx = document.createElement("canvas").getContext("2d");
ctx.canvas.width = 512;
ctx.canvas.height = 512;
document.body.appendChild(ctx.canvas);
ctx.setTransform(128, 0, 0, 128, 0, 0);
ctx.drawImage(textureCanvas,1,1,2,1,0,0,2,1);

html {
  background-color: red;
}

是

所以我猜这意味着你可以控制它，但间接使用不同的技术。