在多个画布上默认禁用 imageSmoothingEnabled

2022-01-17 00:00:00 canvas javascript html5-canvas

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

I'm creating a browser-based game that uses layered canvases and sprite images, and for visual and performance reasons I would like to disable imageSmoothingEnabled by default. It's my understanding that imageSmoothingEnabled isn't available in all browsers, but there are vendor-prefixed versions. I am trying to find an elegant way to disable this attribute by default across all my canvases (in as many browsers as possible). So far, this is my method:

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 更改为默认值?

Is there a more elegant approach? Is it perhaps possible to change the context's API to default to false, before actually creating each canvas context?

推荐答案

是的，你有一个更简洁的方法:因为你总是会通过在画布上使用 getContext('2d') 来获取上下文，您可以注入 getContext，以便它在返回上下文之前执行您喜欢的任何设置.

Yes, you have a cleaner approach : since you will always get a context by using getContext('2d') on a canvas, you can inject getContext, so that it does any setup of your like before returning the context.

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

The following piece of code successfully sets the smoothing to false for all your contexts :

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

(it should, quite obviously, be run before any call to 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 访问的情况下将它们放在手边.

Rq that you can do anything in 'your' getContext. I use it to copy canvas's width, height on the context to have them at hand with no DOM access, among other things.

相关文章