CSS3的新功能我也看了一一些,做了一个简要的笔记,总结一下,当成学习笔记发上来,这是CSS3的第三篇了。
· 使用:
a. 首先在HTML中键入一个标签<canvas id="canvasTest" height=""widht=""></canvas>
b. 在JS中通过以下代码获得画布对象
Vardw=document.getEmelemetById("canvasTest").getContext("2d")
c. 之后通过操作变量dw就可以了
· 绘制形状相关方法:
o 绘制常用方法、绘制线段方法
方法
说明
moveTo(x,y)
把路径移动到指定点,不创建线条
lineTo(x,y)
增添一个新点,并且创建一个从上一个点到这个点的线段
Stroke
绘制已经定义了的路径
beginPath
起始一条新路径或重置当前路径
lineWidth
设置或返回当前线段的宽度
strokeStyle
设置或返回画笔的颜色、渐变或模式
lineCap
设置或返回线段钟点的样式,取值有butt、round、square
o 绘制矩形方法
方法
说明
Rect(x,y,width,height)
绘制一个矩形路径
fillRect(x,y,width,height)
绘制一个被填充的矩形,填充的颜色等内容由fillStyle方法设置
fillStyle
设置或返回用于填充绘画的颜色、渐变或模式
strokeRect(x,y,width,heignt)
绘制无填充矩形
clearRect
清除指定矩形范围内的像素
Fill
根据当前绘制路径填充,可以先调用Rect方法,再调用这个方法,效果和fillRect一样
o 绘制圆 一个例子:dw.arc(0,0,50,0,270*Math.PI/180,false);dw.stroke();
方法
说明
Arc(x,y,r,sAngle,eAngle[,counterlockwise])
绘制一个圆的路径,参数分别是圆心坐标、半径、起始角度、终止角度、以及可选参数——顺时针或逆时针方向(true表示逆时针,false表示顺时针)
o 绘制弧
一个例子:绘制一个矩形的圆角,圆角半径30
dw.moveTo(20,20);
dw.lineTo(100,20);
dw.arcTo(150,20,150,70,30);
dw.stroke();
方法
说明
ArcTo(x1,y1,x2,y2,r)
绘制一个弧的路径,首先应当已知弧的起点的坐标,然后该方法再需要弧的圆心坐标,弧的终点坐标,以及半径
o 绘制贝塞尔曲线
方法
说明
quadraticCurveTo(x1,y1,x2,y2)
绘制一个二次方贝塞尔曲线,参数一个是贝塞尔曲线控制点坐标一个是终点坐标
bezierCurveTo(x1,y1,x2,y2,x3,y3)
绘制一个三次方贝塞尔曲线,参数是两个控制点坐标和一个终点坐标
绘制文本
方法
说明
Font
设置或放回当前的字体属性,包括字体大小、字体种类
textAlign
这之火返回文本内容的对齐方式
textBaseline
这之火返回绘制文本时的文本基线(?)
fillText
绘制被填充的文本
stroleText
获知无填充文本