Canvas标签用来绘制图像会使用到的方法和属性

clearRect() 方法清空给定矩形内的指定像素

JavaScript 语法：

context.clearRect(x,y,width,height);

参数值

参数描述x要清除的矩形左上角的 x 坐标y要清除的矩形左上角的 y 坐标width要清除的矩形的宽度，以像素计height要清除的矩形的高度，以像素计

fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式。

默认值：#000000JavaScript 语法：context.fillStyle=color|gradient|pattern;

属性值

值描述color指示绘图填充色的 CSS 颜色值。默认值是 #000000。gradient用于填充绘图的渐变对象（线性或放射性）pattern用于填充绘图的 pattern 对象

定义从黑到红到白的的渐变，作为矩形的填充样式

var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");var my_gradient=ctx.createLinearGradient(0,0,170,0);my_gradient.addColorStop(0,"black");my_gradient.addColorStop(0.5,"red");my_gradient.addColorStop(1,"white");ctx.fillStyle=my_gradient;ctx.fillRect(20,20,150,100);

使用图像来填充绘图：

var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");var img=document.getElementById("lamp");var pat=ctx.createPattern(img,"repeat");ctx.rect(0,0,150,100);ctx.fillStyle=pat;ctx.fill();

arc() 方法创建弧/曲线（用于创建圆或部分圆）。

提示：如需通过 arc() 来创建圆，请把起始角设置为 0，结束角设置为 2*Math.PI。

提示：请使用 stroke() 或 fill() 方法在画布上绘制实际的弧。

JavaScript 语法：

context.arc(x,y,r,sAngle,eAngle,counterclockwise);

参数值

参数描述x圆的中心的 x 坐标。y圆的中心的 y 坐标。r圆的半径。sAngle起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。eAngle结束角，以弧度计。counterclockwise可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。

closePath() 方法关闭一条打开的子路径。

描述

如果画布的子路径是打开的，closePath() 通过添加一条线条连接当前点和子路径起始点来关闭它。

如果子路径已经闭合了，这个方法不做任何事情。

一旦子路径闭合，就不能再为其添加更多的直线或曲线了。要继续向该路径添加，需要通过调用 moveTo() 开始一条新的子路径。

使用HTML5里的classList操作CSS类

在HTML5 API里，页面DOM里的每个节点上都有一个classList对象，程序员可以使用里面的方法新增、删除、修改节点上的CSS类。使用classList，程序员还可以用它来判断某个节点是否被赋予了某个CSS类。

Properties

属性Descriptionlength返回类列表中类的数量

该属性是只读的

方法

方法描述add(class1, class2, ...)在元素中添加一个或多个类名。

如果指定的类名已存在，则不会添加contains(class)返回布尔值，判断指定的类名是否存在。

可能值：

• true - 元素包已经包含了该类名
• false - 元素中不存在该类名

item(index)返回类名在元素中的索引值。索引值从 0 开始。

如果索引值在区间范围外则返回 nullremove(class1, class2, ...)移除元素中一个或多个类名。

注意： 移除不存在的类名，不会报错。toggle(class, true|false)在元素中切换类名。

第一个参数为要在元素中移除的类名，并返回 false。
如果该类名不存在则会在元素中添加类名，并返回 true。

第二个是可选参数，是个布尔值用于设置元素是否强制添加或移除类，不管该类名是否存在。例如：

移除一个 class: element.classList.toggle("classToRemove", false);
添加一个 class:element.classList.toggle("classToAdd", true);

注意： Internet Explorer 或 Opera 12 及其更早版本不支持第二个参数。

正如你上面看到的，Element.classList类很小，但里面的每个方法都很有用。

新增CSS类

使用add方法，你可以往页面元素是新增一个或多个css类：

myDiv.classList.add('myCssClass');

删除一个CSS类

使用remove方法，你可以删除单个CSS类：

myDiv.classList.remove('myCssClass');

你可以在这个方法里一次传入多个类名，用空格分开，但执行的结果很有可能不是你预期的。

反转CSS类的有无

myDiv.classList.toggle('myCssClass'); //现在是增加myDiv.classList.toggle('myCssClass'); //现在是删除

这个方法的作用就是，当myDiv元素上没有这个CSS类时，它就新增这个CSS类；如果myDiv元素已经有了这个CSS类，它就是删除它。就是反转操作。

检查是否含有某个CSS类

myDiv.classList.contains('myCssClass'); //returns true or false

目前所有的现代浏览器(火狐浏览器，谷歌浏览器等)都支持这个classList类，所以，相信新型的javaScript类库里都会使用classList类来操作页面CSS类，而不需像以前一样去分析元素节点的class属性！