在HTML5中，追加了两个 canvas 原素，它就是页面上的几块画布。有了画布，就能不采用 Flash 等服务器端应用程序，直接在页面上绘出并表明图形或动画电影。
1.1基本上用语
采用条码在页面上建立画布原素，画布假如建立，就能采用Javascript提供更多的两套强悍的Canvas API撰写标识符，在画布中绘出任一图形，甚至重新加入高阶动画电影。
在Canvas中绘出图形，一般须要三步，依序为：
1）建立画布
在HTML
画布的预设长度为300px，度为150px，能透过原素的width特性自表述其长度，height特性自表述其度。标识符如下表所示：
前述标识符，在页面中建立了两个画布，其id为”canvas”，长度为300px，伊格纳季耶夫300px。
表明：1、预设情况下，画布这类没有任何人外形，只是几块透明化地区，什么也静止不动，能透过CSS来控制，让其由此可见。跟其他HTML原素一样，也能透过CSS来表述canvas原素的体积、增加前面板、增设吉洛姆距、外面距等。因此，CSS特性的承继准则也反之亦然适用于，如在canvas内加进的文本，预设会承继canvas原素这类的手写体特性。须要当心的是，画布的体积和CSS表述的体积是完全不同的基本概念。画布的体积是由画布原素的width和height特性表述的，而CSS中表述的体积是画布原素在页面中表明的体积。如果二者表述的体积不完全相同，则画布上的画素会手动翻转，以适宜CSS中表述的体积。另外，画布中的座标，也是根据画布的width和height特性表述的。2、画布的体积假如表述，就不能修正，假如抹除画布。抹除画布的width特性或height特性，单厢移走整座画布，抹除现阶段方向，并抹除所有的图形特性到稳态。3、由于是HTML5中追加的原素，一些老应用程序（如IE8及下列版）不全力支持原素。能在原素外部提供更多代替相片、或文档表明，为访客提供更多亲善的提示。如：您的应用程序不全力支持canvas。
现在画布已经有了，要在画布上绘出图形，还须要一头画布
var canvas = document.getElementById(“canvas”);
var context = canvas.getContext(“2d”);
由于画布制二维图形的画布。当然，还会有”3d”，但目前还不全力支持。
画布在Canvas 中被称作“绘出上下文”，Canvas API基本上上都是表述在“绘出上下文”对象上，而非原素上。
3）表述绘出方向
Canvas中的所有基本上图形，都是根据方向来绘出的。首先，调用beginPath()方法开始一条新的方向；然后，表述方向及子方向；最后，调用closePath()方法来关闭。标识符如下表所示：
context.beginPath();
context.rect(20,40,200,80);
context.closePath();
前述标识符中，rect()方法绘出了一条矩形方向，该矩形方向的左上顶点座标为x=20,y=40，矩形长度为200px，长度为80px。
表明：Canvas的座标系
预设情况下，Canvas 的座标系以Canvas 原素的左上角为座标原点(0,0)。水平方向为x轴，并向右增长；垂直方向为y轴，并向下增长。如图41所示：
图41 Canvas的预设座标系统
画布上每两个点的座标都直接映射到两个CSS画素上，点能采用浮点数来指定座标，但它不会手动转换为整型值。
须要注意的是，此时，所绘出的内容并不会立即表明出来。因为这里只是表述一条不由此可见的方向，并未在画布上绘出任何人图形。稍后，能调用stroke()或fill()方法，来执行绘出动作，使其由此可见。
4）增设图形特性
context.strokeStyle =#f00;//增设线条样式
context.fillStyle =”#ccc”;//增设填充样式
前述标识符增设矩形方向的轮廓线条的颜色为红色（#f00），填充颜色为灰色（#ccc）。该步骤为可选，如果省略，则采用Canvas提供更多的预设特性图形。
5）绘出图形
Canvas预设提供更多两种绘出方法：stroke()方法和fill()方法。stroke()方法沿着方向的座标点依序绘出线条，fill()方法填充方向形成的闭合地区。
这两个方法都作用在现阶段方向的所有子方向上，因此都不更改现阶段方向，所以它们能被同时调用。标识符如下表所示：
context.stroke();
context.fill();
如果存在多条方向，则每条方向都要分别调用stroke()方法或fill()方法，否则，该方向不会被绘出，该方向所表述的图形不会表明在画布中。
至此，在画布中绘出图形的过程就全部完成了，图形已经真正绘出到画布上了。当然，在实际应用中，最好将这些绘出过程封装在两个函数中，并在页面加载完成后，再调用绘出函数来绘出图形。本实例的完整标识符如下表所示：
在应用程序中的运行效果如图42所示：
图42 Canvas中绘出图形
