HTML5 规范引进了很多新特性，其中最令人期待的之一就是 canvas 元素。canvas 元素用于在网页上绘制图形。HTML 5 canvas 提供了通过 JavaScript 绘制图形的方法，蓝狮注册此方法使用简单但功能强大。画布是一个矩形区域，您可以控制其每一像素。每一个 canvas 元素都有一个”上下文( context )” (想象成绘图板上的一页)，canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法，在其中可以绘制任意图形。浏览器支持多个 canvas 上下文，并通过不同的 API 提供图形绘制功能。大部分的浏览器都支持 2D canvas 上下文——包括 Opera, Firefox, Konqueror 和 Safari。而且某些版本的 Opera 还支持 3D canvas ，Firefox 也可以通过插件形式支持 3D canvas。
向HTML5 页面添加canvas 元素。规定元素的id、宽度和高度：

通过JavaScript 来绘制，canvas 元素本身是没有绘图能力的。所有的绘制工作必须在JavaScript 内部完成：

JavaScript 使用id 来寻找canvas 元素：var c=document.getElementById(“myCanvas”);
然后，创建context 对象：var cxt=c.getContext(“2d”);
getContext(“2d”) 对象是内建的HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
下面的两行代码绘制一个红色的矩形：
cxt.fillStyle=”#FF0000″;
cxt.fillRect(0,0,150,75);
fillStyle 方法将其染成红色，fillRect 方法拥有参数(0,0,150,75)。意思是：在画布上绘制150×75 的矩形，从左上角开始(0,0)。
注：fillStyle方法是设置矩形的填充，颜色值使用方法和 CSS 一样：蓝狮官网十六进制数、rgb()、rgba() 和 hsla；fillRect可以绘制带填充的矩形，上述两个方法的参数相同：x, y, width, height。前两个参数设定 (x,y) 坐标，后两个参数设置矩形的高度和宽度。
(1)实例 – 线条
通过指定从何处开始，在何处结束，来绘制一条线：

(2)实例 – 圆形
通过规定尺寸、颜色和位置，来绘制一个圆：

注：使用 beginPath()开始绘制，closePath() 结束自定义图形绘制。
(3)实例 – 渐变
使用您指定的颜色来绘制渐变背景：

注：createLinearGradient 方法是创建线性颜色渐变，还有一个方法createRadialGradient是创建圆形颜色渐变，这两个方法都是CanvasGradient对象的 方法，创建颜色渐变对象后，使用addColorStop方法添加颜色中间值。
(4)实例 – 图像
把一幅图像放置到画布上：

注：drawImage 方法允许在 canvas 中插入其他图像( img 和 canvas 元素) 。在 Opera 中可以再 canvas 中绘制 SVG 图形。此方法比较复杂，可以有3个、5个或9个参数。
3个参数：最基本的 drawImage 使用方法。一个参数指定图像位置，另两个参数设置图像在 canvas中的位置。
5个参数：中级的 drawImage 使用方法，包括上面所述3个参数，加两个参数指明插入图像宽度和高度 (如果你想改变图像大小)。
9个参数：最复杂 drawImage 使用方法，包含上述5个参数外，另外4个参数设置源图像中的位置和高度宽度。这些参数允许你在显示图像前动态裁剪源图像。
Canvas 是 HTML 5最让人期待的特性之一，目前已获得大部分 Web 浏览器支持。Canvas 可以帮助创建游戏、增强图形用户界面。2D context API 提供大量图形绘制功能，希望你通过本文对 canvas 的基础学习，并且你有兴趣了解更多关于Canvas！

标签：Canvas, HTML5