CSS3一览（3） Canvas画布（1）

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	获知无填充文本