什么是Canvas

<canvas> 标签定义图形，比如图表和其他图像，您必须使用脚本（通常是 JavaScript）来绘制图形。

<canvas> 元素本身没有绘制能力（它仅仅是图形的容器） - 必须使用脚本来完成实际的绘图任务。

getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。

浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 <canvas> 及其属性和方法。

注释：Internet Explorer 8 以及更早的版本不支持 <canvas> 元素。

创建一个画布

一个画布在网页中是一个矩形框，通过 <canvas> 元素来绘制.

注意: 默认情况下 <canvas> 元素没有边框和内容。

<canvas>简单实例如下:

<canvas id="myCanvas" width="200" height="100"></canvas>

注意: 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小.

提示:你可以在HTML页面中使用多个 <canvas> 元素.

使用 style 属性来添加边框:

<canvas id="myCanvas" width="200" height="100"style="border:1px solid #000000;"></canvas>

注释：<canvas> 元素中的任何文本将会被显示在不支持 <canvas> 的浏览器中。

使用 JavaScript 来绘制图像

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

// 首先，找到 <canvas> 元素:
var c=document.getElementById("myCanvas");
// 然后，创建 context 对象：
var ctx=c.getContext("2d");
// getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
// 下面的两行代码绘制一个红色的矩形：
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

设置 fillStyle 属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。

fillRect(x, y, width, height) 方法定义了矩形当前的填充方式。

颜色、样式和阴影

线条样式

矩形

路径

转换

文本

图像绘制

像素操作

合成

其他