关于 HTML5 Canvas 的兼容性、最佳实践、常用代码片段、性能优化、Cheat Sheet 以及相关教程。

Canvas 兼容性

IE9 及之后版本的 IE 和其他浏览器都包含对 canvas 元素和相关 API 的基本支持。

详见 Can I use canvas?

检测 canvas 可用性

使用 Modernizr 

if (Modernizr.canvas) { ... }

直接编写 js 代码检测

参考： Modernizr/canvas.js

var elem = document.createElement('canvas');
var canvasSupported = !!(elem.getContext && elem.getContext('2d'));

为 canvas 元素设置替换内容

Canvas 元素的 HTML 形式可以不只是 <canvas id="example" width="300" height="150"></canvas> 这么简单，在 <canvas></canvas> 标签内，还可以有其他内容。

这些内容在

  • 浏览器不支持 <canvas> 元素；
  • 或浏览器禁用了 JavaScript；
  • 或用户使用了屏幕阅读器；
  • 或用户使用键盘进行导航；

的情况下有很大的帮助。可以在无法有效使用 canvas 的情况下，依然为用户提供有用的信息。

如

<canvas id="stockGraph" width="150" height="150">
  current stock price: $3.15 +0.15
</canvas>

<canvas id="clock" width="150" height="150">
  <img src="images/clock.png" width="150" height="150" alt=""/>
</canvas>

例子来自Canvas的基本用法 - Web API 接口 | MDN

关于 Canvas 无障碍访问的内容，还可以参考HTML5 Canvas Accessibility in Firefox 13。

Canvas 相关 API 的兼容性研究

Canvas 宽高

Canvas 的默认宽高为 300 x 150（这也是其他可替换元素如 <object>, <video> 等的默认宽高），其值也可分别由 width 和 height 属性指定。

同时， width 和 height 也是 canvas 元素除全局属性外仅有的属性。（canvas 元素还有一个 Firefox (Gecko) 私有的属性 moz-opaque）

Canvas 的宽高可以在 html 中指定：

<canvas id="canvas" width="640" height="480"></canvas>

也可以使用 js 来动态控制：

var canvas = document.getElementById('canvas');
canvas.width = 640;
canvas.height = 480;

注意：

  • 重设 canvas 的宽或高时，会清空 canvas 中的内容，并恢复该 canvas 的渲染上下文 context 至其默认状态；

  • 使用 css 为 canvas 元素设置宽高时，相当于对其进行缩放，而不会影响 canvas 的渲染上下文的宽高等属性；

  • 在 css 中若只为 canvas 元素设置 width 或 height 中的一个，则另一项属性会自动地按比例进行缩放。

Canvas 的渲染上下文

var canvas = document.getElementById('tutorial');
var context = canvas.getContext('2d');

注意：

  • context 如 2d 等，是大小写敏感的；
  • 3d 的 context 根据浏览器不同，叫做 experimental-webgl 或 webgl。

最佳实践

  • 由于在 canvas 上绘制图像需要借助 JavaScript，因此为每个 canvas 元素添加 id 属性，可以简化 JavaScript 对 canvas 元素的访问。

Canvas 常用代码片段

性能优化

Cheat Sheet

教程资料