HTML5 画布_H5之家 - 中国HTML5教程资源分享第一站

HTML5 画布

HTML5 <canvas> 元素为我们使用 JavaScript 绘制图形提供了一种简单而又强大的方式。它可以用来绘制图表，制作摄影作品或者做一些简单（以及复杂）的动画。

这里有一个简单的 <canvas> 元素，除了所有核心的 HTML5 属性，比如 id，name 和 class 等等之外，它只有两个特定的属性 width 和 height。

使用 _getElementById()__ 方法很容易找到这个 <canvas> 元素，如下所示：

var canvas = document.getElementById("mycanvas");

我们来看一个在 HTML5 文档中使用 <canvas> 元素的简单示例。

<!DOCTYPE HTML> <html> <head> <style> #mycanvas{ border:1px solid red; } </style> </head> <body> <canvas></canvas> </body> </html>

便于学习上述概念 - 请使用最新版的 Safari 或者 Opera 进行在线练习。

渲染上下文

<canvas> 初始为空，要显示某物，脚本首先需要访问渲染上下文，然后再上面绘图。

canvas 元素有一个叫做 getContext 的 DOM 方法，用于获得渲染上下文和它的绘图功能。这个函数接受一个参数，2d 上下文类型。

下面的代码就是访问需要的上下文以及检测浏览器是否支持 <canvas> 元素：

var canvas = document.getElementById("mycanvas"); if (canvas.getContext){ var ctx = canvas.getContext('2d'); // drawing code here } else { // canvas-unsupported code here } 浏览器支持

最新版的 FireFox，Safari，Chrome 和 Opera 都支持 HTML5 Canvas，但是 IE8 不支持原生 Canvas。

我们可以使用 ExplorerCanvas 让 IE 浏览器支持 Canvas。只需按照如下方式引入这个脚本即可：

HTML5 Canvas 示例

本教程涵盖下列 HTML5 <canvas> 元素相关的示例。

示例描述

绘制矩形

学习如何使用 HTML5 <canvas> 元素绘制矩形。

绘制路径

学习如何在 HTML5 <canvas> 元素中使用路径创建形状。

绘制线条

学习如何使用 HTML5 <canvas> 元素绘制线条。

绘制贝塞尔曲线

学习如何使用 HTML5 <canvas> 元素绘制贝塞尔曲线。、

绘制二次曲线

学习如何使用 HTML5 <canvas> 元素绘制二次曲线。

使用图像

学习如何在 HTML5 <canvas> 元素中使用图像。

创建渐变

学习如何使用 HTML5 <canvas> 元素创建渐变。

样式和颜色

学习如何使用 HTML5 <canvas> 元素应用样式和颜色。

文本和字体

学习如何使用不同的字体和尺寸绘制神奇的文字。

图案和投影

学习如何绘制不同的图案和阴影。

画布状态

学习如何在画布上做复杂绘图时保存和恢复画布状态。

画布平移

这个方法用于移动画布和它原点到网格上的不同点。

画布旋转

这个方法用于围绕当前原点旋转画布。

画布缩放

这个方法用于增大或者减小画布网格中的单位。

画布变换

这个方法允许我们直接修改变换矩阵。

画布合成

这个方法用于从画布上屏蔽某些区域或者清除某一部分。

Canvas 动画

学习如何使用 HTML5 画布和 JavaScript 创建基本的动画。

上一篇: HTML5 WebSocket 下一篇: HTML5 音频和视频