HTML5 Canvas之检测访问器是不是适用Canvas的方式

日期:2021-01-20 类型:科技新闻 

关键词:小程序 活动,微信小程序demo,微信小程序游戏开发价格,手机小程序怎么做,视频播放微信小程序

本文汉语翻译自Steve Fulton & Jeff Fulton HTML5 Canvas, Chapter 1, “Testing to See Whether the Browser Supports Canvas”.

在获得HTML网页页面上Canvas元素的引入后,大家必须检测1下该元素是不是包括“左右文”(context)。Canvas的左右文指的是由访问器界定的用于美术绘画的平面。简易地说,假如左右文不存在的话,Canvas也就有名无实了。检测访问器是不是适用Canvas有好几种方式。第1种方式是查验HTML网页页面中Canvas元素的getContext方式是不是存在:

拷贝编码
编码以下:

if (!theCanvas || !theCanvas.getContext) {
return;
}

客观事实上,上述编码检测了两点:其1,检测了theCanvas是不是为false(假如id不存在的话,document.getElementById()会回到false);其2,检测了getContext()涵数是不是存在。

在上述编码中,假如检测不成功,那末return句子实行,程序流程停止。

另外一种方式是建立1个专业用于分辨Canvas是不是得以适用的涵数,而在该涵数中,即时转化成1个Canvas元向来开展这类分辨 — 这类方式很时兴,Mark Pilgrim在他的HTML5网站http://diveintohtml5.org中提到了这类计划方案:

拷贝编码
编码以下:

function canvasSupport() {
return !!document.createElement('canvas').getContext;
}
function canvasApp() {
if (!canvasSupport()) {
return;
}
}

大家最偏爱的方式是应用modernizr.js库(在http://www.modernizr.com中能够寻找)。Modernizr是1个简易易用的轻量级JavaScript库,用于检测各种各样Web技术性的适配性 — 它出示了许多静态数据的Boolean方式,能够用来检测当今Canvas是不是获得适用。

在HTML网页页面中引进modernizr很简易,从http://www.modernizr.com左右载编码,随后在HTML网页页面中包括这个外界js文档便可:

拷贝编码
编码以下:

<script src="modernizr⑴.6.min.js"></script>

应用Modernizr检测Canvas的适用性,只需将上面的canvasSupport涵数修改1下便可以了:

拷贝编码
编码以下:

function canvasSupport() {
return Modernizr.canvas;
}

大家觉得,分辨访问器是不是适用Canvas,应用Modernizr.js是最好是的计划方案。