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

获知无填充文本