• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > HTML5 Canvas之测试浏览器是否支持Canvas的方法_html5教程技巧

HTML5 Canvas之测试浏览器是否支持Canvas的方法_html5教程技巧

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含测试浏览器是否支持Canvas等相关知识,匿名希望在学习及工作中可以帮助到您
本文翻译自Steve Fulton & Jeff Fulton HTML5 Canvas, Chapter 1, “Testing to See Whether the Browser Supports Canvas”.

在获取HTML页面上Canvas元素的引用后,我们需要测试一下该元素是否包含“上下文”(context)。Canvas的上下文指的是由浏览器定义的用于绘画的平面。简单地说,如果上下文不存在的话,Canvas也就名存实亡了。测试浏览器是否支持Canvas有好几种方法。第一种方法是检查HTML页面中Canvas元素的getContext方法是否存在:

在上述代码中,如果测试失败,那么return语句执行,程序终止。

另一种方法是创建一个专门用于判断Canvas是否得以支持的函数,而在该函数中,实时生成一个Canvas元素来进行这种判断 — 这种方法很流行,Mark Pilgrim在他的HTML5网站http://diveintohtml5.org中提到了这种方案:

在HTML页面中引入modernizr很简单,从http://www.modernizr.com上下载代码,然后在HTML页面中包含这个外部js文件即可:

我们认为,判断浏览器是否支持Canvas,使用Modernizr.js是最好的方案。

您可能想查找下面的文章:

相关文章

  • 2018-12-03HTML5 canvas基本绘图之绘制五角星
  • 2018-12-03请问做H5页面需要学什么?
  • 2018-12-03总结phonegap常用时间操作
  • 2018-12-03H5的块级标签汇总
  • 2017-08-06HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例
  • 2018-12-03HTML5边玩边学(3)像素和颜色 _html5教程技巧
  • 2018-12-03html5开始播放当前的音频或视频的方法
  • 2018-12-03html5 video 移动端详解
  • 2018-12-03基于HTML5的CSS框架组件BootFlat的图文介绍
  • 2018-12-03随着HTML5的发展和微信应用号的出现,如何看待未来移动开发着的定位?

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 用html5实现一个简单的钟表外观
    • html5 canvas里绘制椭圆并保持线条粗细均匀的技巧_html5教程技巧
    • linux下HTML5用户及用户组管理命令详解
    • 网易微博Web App用HTML5开发的过程介绍
    • 如何用H5实现一个触屏版的轮播器的实例
    • HTML5新增的Css选择器、伪类介绍_html5教程技巧
    • 移动站如何使用?总结移动站实例用法
    • 简单介绍HTML5中的文件导入_html5教程技巧
    • 5个你不知道的HTML5的接口介绍
    • Html5、CSS实现文字阴影效果实例分享

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有