javascript - 在多个 Canvas 上默认禁用 imageSmoothingEnabled

Question

我正在创建一个使用分层 Canvas 和 Sprite 图像的基于浏览器的游戏，出于视觉和性能原因，我想默认禁用 imageSmoothingEnabled。据我了解，imageSmoothingEnabled 并非在所有浏览器中都可用，但有 vendor 前缀版本。我正在尝试找到一种优雅的方式来默认在我的所有 Canvas 上禁用此属性(在尽可能多的浏览器中)。到目前为止，这是我的方法:

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...

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

Answer 1

是的，你有一个更简洁的方法:因为你总是通过在 Canvas 上使用 getContext('2d') 来获取上下文，你可以注入(inject) 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 ;

请问您可以在“您的”getContext 中执行任何操作。我用它在上下文中复制 Canvas 的宽度和高度，以便在没有 DOM 访问权限的情况下使用它们。