Canvas标签用来绘制图像会使用到的方法和属性
2017-08-10 17:57
295 查看
clearRect() 方法清空给定矩形内的指定像素
fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式。
定义从黑到红到白的的渐变,作为矩形的填充样式
ctx.fillRect(20,20,150,100);[/code]
使用图像来填充绘图:
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() 方法在画布上绘制实际的弧。
closePath() 方法关闭一条打开的子路径。
如果子路径已经闭合了,这个方法不做任何事情。
一旦子路径闭合,就不能再为其添加更多的直线或曲线了。要继续向该路径添加,需要通过调用
moveTo() 开始一条新的子路径。
正如你上面看到的,
你可以在这个方法里一次传入多个类名,用空格分开,但执行的结果很有可能不是你预期的。
这个方法的作用就是,当myDiv元素上没有这个CSS类时,它就新增这个CSS类;如果myDiv元素已经有了这个CSS类,它就是删除它。就是反转操作。
目前所有的现代浏览器(火狐浏览器,谷歌浏览器等)都支持这个
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"); [code]ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);[/code]
使用图像来填充绘图:
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() 通过添加一条线条连接当前点和子路径起始点来关闭它。如果子路径已经闭合了,这个方法不做任何事情。
一旦子路径闭合,就不能再为其添加更多的直线或曲线了。要继续向该路径添加,需要通过调用
moveTo() 开始一条新的子路径。
使用HTML5里的classList操作CSS类
在HTML5 API里,页面DOM里的每个节点上都有一个classList对象,程序员可以使用里面的方法新增、删除、修改节点上的CSS类。使用
classList,程序员还可以用它来判断某个节点是否被赋予了某个CSS类。
Properties
属性 | Description |
---|---|
length | 返回类列表中类的数量 该属性是只读的 |
方法
方法 | 描述 |
---|---|
add(class1, class2, ...) | 在元素中添加一个或多个类名。 如果指定的类名已存在,则不会添加 |
contains(class) | 返回布尔值,判断指定的类名是否存在。 可能值: true - 元素包已经包含了该类名 false - 元素中不存在该类名 |
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属性!
相关文章推荐
- HTML5<canvas>标签:使用canvas元素在网页上绘制渐变和图像(2)
- html各个标签属性及使用方法资料(VIP)
- 深入了解Canvas标签(3)——使用图像
- select标签multiple属性的使用方法
- HTML embed标签使用方法和属性详解
- 使用Canvas的drawTextOnPath方法实现沿着Path绘制文本
- fieldset和legend标签的属性和使用方法
- a标签Target属性的使用方法
- HTML中a标签的target属性使用方法
- C++ Builder 使用Canvas的方法来绘制图形对象
- jquery修改标签属性,attr方法使用
- webwrok iterator标签status属性使用方法
- HTML embed标签使用方法和属性详解
- 使用tabindex属性是的标签具有onblur,onfocus方法
- html5 标签与对应属性详细使用方法
- 实例讲解使用HTML5 Canvas绘制阴影效果的方法
- fieldset和legend标签的属性和使用方法
- 使用HTML5的Canvas绘制曲线的简单方法
- 要绘图,首先得调整画笔,待画笔调整好之后,再将图像绘制到画布上,这样才可以显示在手机屏幕上。Android 中的画笔是 Paint类,Paint 中包含了很多方法对其属性进行设置,主要方法(没有全部列