默认情况下禁用多个画布上的imageSmoothingEnabled [英] disabling imageSmoothingEnabled by default on multiple canvases

问题描述

我正在创建一个基于浏览器的游戏，使用分层的画布和精灵图片，并且出于视觉和性能的原因，我想默认禁用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.

这篇关于默认情况下禁用多个画布上的imageSmoothingEnabled的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！