Javascript 默认情况下，在多个画布上禁用imageSmoothingEnabled

我正在创建一个基于浏览器的游戏，使用分层画布和精灵图像，出于视觉和性能原因，我想在默认情况下禁用ImageSmoothInEnabled。据我所知，ImageSmoothInEnabled并非在所有浏览器中都可用，但有供应商前缀版本。我试图找到一种优雅的方法，在尽可能多的浏览器中，在所有画布上默认禁用此属性。到目前为止，这是我的方法：

context1.imageSmoothingEnabled = false;
context1.mozImageSmoothingEnabled = false;
context1.oImageSmoothingEnabled = false;
context1.webkitImageSmoothingEnabled = false;

context2.imageSmoothingEnabled = false;
context2.mozImageSmoothingEnabled = false;
context2.oImageSmoothingEnabled = false;
context2.webkitImageSmoothingEnabled = false;

context3.imageSmoothingEnabled = false;
context3.mozImageSmoothingEnabled = false;
context3.oImageSmoothingEnabled = false;
context3.webkitImageSmoothingEnabled = false;
//etc...

---

有没有更优雅的方法？在实际创建每个画布上下文之前，是否可以将上下文的API更改为默认值为false？

您可以将其放入如下方法中：

function imageSmoothingEnabled(ctx, state) {
    ctx.mozImageSmoothingEnabled = state;
    ctx.oImageSmoothingEnabled = state;
    ctx.webkitImageSmoothingEnabled = state;
    ctx.imageSmoothingEnabled = state;
}

然后针对每个上下文调用：

imageSmoothingEnabled(context1, false);
imageSmoothingEnabled(context2, false);
imageSmoothingEnabled(context3, false);

由于这些是属性，您不能简单地更改它们的默认值。这里的方法非常干净-通过首先检查属性的存在性，它可以更干净：

if (typeof ctx.webkitImageSmoothingEnabled !== 'undefined')
    ctx.webkitImageSmoothingEnabled = state;

---

等等。

您可以将它们放入如下方法中：

function imageSmoothingEnabled(ctx, state) {
    ctx.mozImageSmoothingEnabled = state;
    ctx.oImageSmoothingEnabled = state;
    ctx.webkitImageSmoothingEnabled = state;
    ctx.imageSmoothingEnabled = state;
}

然后针对每个上下文调用：

imageSmoothingEnabled(context1, false);
imageSmoothingEnabled(context2, false);
imageSmoothingEnabled(context3, false);

由于这些是属性，您不能简单地更改它们的默认值。这里的方法非常干净-通过首先检查属性的存在性，它可以更干净：

if (typeof ctx.webkitImageSmoothingEnabled !== 'undefined')
    ctx.webkitImageSmoothingEnabled = state;

---

等等。

是的，您有一个更干净的方法：因为您总是通过在画布上使用getContext'2d'来获取上下文，所以您可以注入getContext，以便它在返回上下文之前执行类似的任何设置

以下代码成功地将所有上下文的平滑设置为false：

很明显，它应该在调用getContext之前运行

// save old getContext
var oldgetContext = HTMLCanvasElement.prototype.getContext ;

// get a context, set it to smoothed if it was a 2d context, and return it.
function getSmoothContext(contextType) {
  var resCtx = oldgetContext.apply(this, arguments);
  if (contextType == '2d') {
   setToFalse(resCtx, 'imageSmoothingEnabled');
   setToFalse(resCtx, 'mozImageSmoothingEnabled');
   setToFalse(resCtx, 'oImageSmoothingEnabled');
   setToFalse(resCtx, 'webkitImageSmoothingEnabled');  
  }
  return resCtx ;  
}

function setToFalse(obj, prop) { if ( obj[prop] !== undefined ) obj[prop] = false; }

// inject new smoothed getContext
HTMLCanvasElement.prototype.getContext = getSmoothContext ;

---

Rq表示您可以在“您的”getContext中执行任何操作。我使用它在上下文上复制画布的宽度、高度，以便在没有DOM访问的情况下将它们放在手边。

是的，您有一个更干净的方法：因为您总是通过在画布上使用getContext'2d'来获得上下文，所以您可以注入getContext，以便它在返回上下文之前执行类似的任何设置

以下代码成功地将所有上下文的平滑设置为false：

很明显，它应该在调用getContext之前运行

// save old getContext
var oldgetContext = HTMLCanvasElement.prototype.getContext ;

// get a context, set it to smoothed if it was a 2d context, and return it.
function getSmoothContext(contextType) {
  var resCtx = oldgetContext.apply(this, arguments);
  if (contextType == '2d') {
   setToFalse(resCtx, 'imageSmoothingEnabled');
   setToFalse(resCtx, 'mozImageSmoothingEnabled');
   setToFalse(resCtx, 'oImageSmoothingEnabled');
   setToFalse(resCtx, 'webkitImageSmoothingEnabled');  
  }
  return resCtx ;  
}

function setToFalse(obj, prop) { if ( obj[prop] !== undefined ) obj[prop] = false; }

// inject new smoothed getContext
HTMLCanvasElement.prototype.getContext = getSmoothContext ;

---

Rq表示您可以在“您的”getContext中执行任何操作。我使用它在上下文中复制画布的宽度、高度，使它们在没有DOM访问的情况下处于手边。

定制getContext的聪明方法，我一定会以新的方式使用此方法。谢谢。定制getContext的聪明方法，我一定会以新的方式使用这个方法。非常感谢。