《JavaScript高效图形编程(修订版)》——第6章 HTML5画布 6.1 画布的支持

简介: 大部分流行的浏览器都支持画布元素,包括Firefox、Chrome、Opera和Safari。2010年7月1日,微软通过IE9开发博客宣布其最新的浏览器会支持画布。事实上,该公司甚至为画布支持提供了硬件加速。

本节书摘来自异步社区《JavaScript高效图形编程(修订版)》一书中的第6章,第6.1节,作者:【美】Raffaele Cecco著,更多章节内容可以访问云栖社区“异步社区”公众号查看

第6章 HTML5画布

HTML5最吸引人的一个特性就是画布(Canvas)元素。画布的形式是在页面上类似于div 的一个矩形区域,使你可以用JavaScript绘制复杂的图形。它最初是由苹果为在Mac操作系统上用Safari浏览器渲染用户界面组件和其他图形而开发的。苹果公司将画布相关的专利以WWW联盟(W3C)的免版税许可条款发布。也就是说,苹果将为在W3C HTML推荐范围内的画布提供免版税的许可。

本章介绍了画布的基本知识并用它来实现多种实际应用。除了阅读本章之外,你不妨考虑下面的书籍进一步增加这方面的知识:

  • Canvas Pocket Reference by David Flanagan
  • HTML5 Canvas by Steve Fulton and Jeff Fulton

画布是一个底层、立即模式的应用程序编程接口(API):

底层

画布提供了快速但相当基本的功能集。例如,矩形是仅有的原生形状。不过你可以通过JavaScript编程来增强其功能。

立即模式

当画布绘图指令被调用时,就立即被执行。这和SVG在绘图之前使用中间数据结构保存层级图形对象是不同的,画布没有这样的中间数据结构。这意味着,可以加入无限层的绘图操作而不影响性能——这对诸如像素图艺术包或其他精细的“层次”特效是特别完美的。

下面的画布示例会显示一个蓝色矩形:
screenshot
(是否使用jQuery取决于个人的喜好)

画布的底层特性使其整洁和简单,而其速度非常适合于动态图形应用。任何熟悉位图图形编程的人使用画布时都会有宾至如归的感觉。

6.1 画布的支持

大部分流行的浏览器都支持画布元素,包括Firefox、Chrome、Opera和Safari。2010年7月1日,微软通过IE9开发博客宣布其最新的浏览器会支持画布。事实上,该公司甚至为画布支持提供了硬件加速。这个相对低调的声明掩盖了它的重要性:IE仍然持有大部分的浏览器市场份额,它对画布提供的支持对使用画布的开发人员是个好消息。然而IE9仅适用于Windows Vista和Windows7,它不支持Windows XP。所有的Windows用户都能享受画布,还需要一段时间。

相关文章
|
2月前
|
存储 JavaScript 前端开发
用 HTML + JavaScript DIY 渐进式延迟法定退休年龄测算器
用 HTML + JavaScript DIY 渐进式延迟法定退休年龄测算器
|
2月前
|
JavaScript 前端开发
用html+javascript打造公文一键排版系统12:删除附件说明中“附件:”里的空格
用html+javascript打造公文一键排版系统12:删除附件说明中“附件:”里的空格
|
7天前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
16 3
|
10天前
|
JavaScript
JS鼠标框选并删除HTML源码
这是一个js鼠标框选效果,可实现鼠标右击出现框选效果的功能。右击鼠标可拖拽框选元素,向下拖拽可实现删除效果,简单实用,欢迎下载
19 4
|
9天前
|
移动开发 HTML5
html5+three.js公路开车小游戏源码
html5公路开车小游戏是一款html5基于three.js制作的汽车开车小游戏源代码,在公路上开车网页小游戏源代码。
27 0
html5+three.js公路开车小游戏源码
|
17天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
66 6
|
1月前
|
JavaScript 前端开发
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
93 1
|
2月前
|
前端开发 JavaScript
HTML+JavaScript+CSS DIY 分隔条splitter
HTML+JavaScript+CSS DIY 分隔条splitter
|
2月前
|
小程序 JavaScript 前端开发
你的生日是星期几?HTML+JavaScript帮你列出来
你的生日是星期几?HTML+JavaScript帮你列出来
|
1月前
|
JavaScript 前端开发
JavaScript 与 HTML 的结合
JavaScript 与 HTML 的结合
15 0

热门文章

最新文章