clearRect() 方法清空给定矩形内的指定像素
JavaScript 语法:
context.clearRect(x,y,width,height);
参数值
参数 | 描述 |
---|---|
x | 要清除的矩形左上角的 x 坐标 |
y | 要清除的矩形左上角的 y 坐标 |
width | 要清除的矩形的宽度,以像素计 |
height | 要清除的矩形的高度,以像素计 |
默认值: | #000000 |
---|---|
JavaScript 语法: | 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
属性 | Description |
---|---|
length | 返回类列表中类的数量 该属性是只读的 |
方法
方法 | 描述 |
---|---|
add(class1, class2, ...) | 在元素中添加一个或多个类名。 如果指定的类名已存在,则不会添加 |
contains(class) | 返回布尔值,判断指定的类名是否存在。 可能值:
|
item(index) | 返回类名在元素中的索引值。索引值从 0 开始。 如果索引值在区间范围外则返回 null |
remove(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属性!