Canvas读书笔记之基础

<!-- Html-->
<canvas id="canvas" width="400" height="400"></canvas>
<!--JS-->
<!--getContext()方法返回CanvasRenderingContext2D对象-->

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
ctx.fillStyle="#DFDFDF";
ctx.fillRect(40,40,80,80);

---

关于CanvasRenderingContext2D提供的方法

方法	简要
viod arc(float x,float y,float radius, float startAngle,endAngle,boolean,counterclockwise）	向Canvas的当前路径上添加一段弧
void arcTo(float x1,float y1,float x2,float y2,float radius)	向Canvas的当前路径上添加一段弧，与前一个方法相比，知识定义弧的方式不同
void beginPath()	开始定义路径
void closePath()	关闭前面定义的路径
void bezierCurveTo(float X1,float Y1,float X2,float Y2,float X3,float Y3)	向Canvas的当前路径上添加一段贝济埃曲线
void clearRect(float X,float width,float height)	擦除指定矩形区域上绘制的图形
void clip()	从画布上裁剪一块出来
CanvasGradient creatLinearGradient(float xStart,float yStart,float xEnd,float yEnd)	创建一个线性渐变
CanvasPattern createPattern(Image image,String style)	创建一个图形平铺
CanvasGradient creatRadialGradient(float xStart,float yStart,float radiusStart,float xEnd,float yEnd,float radiusEnd)	创建一个圆形渐变
void drawImage(Image image ,float x,float y),void drawImage(Image image,float x,float y ,float width,float height),void drawImage(Image image,integer sx,integer,sy,integer sw,integer sh,float dx,float dy,float dw,float dh)	绘制位图
void fill()	填充Canvas的当前路径
void fillText(String text,float x,float y,[float maxWidth])	填充字符串
void lineTo(float x,float y)	把Canvas的当前路径从当前结束点连接到x\y对应的点
void moveTo(float x,float y)	把Canvas的当前路径的结束点移动到x、y对应的点
void quardraticCurveTo(float cpX,float cpY,float x,float y)	向Canvas的当前路径上添加一段二次曲线
void rect(float x,float y,float width,float height)	向Canvas的当前路径上添加一个矩形
void storke()	沿着Canvas的当前路径绘制边框
void storkeRect(float x,float y,float width,float height)	绘制一个矩形边框
void strokeText(String text,float x,float y,[float maxWidth])	绘制字符串的边框
void save()	保存当前的绘制状态
void restore()	回复之前保存的绘图状态
void rotate(float angle)	旋转坐标系统
void scale(float sx,float sy)	缩放坐标系统
void translate(float x,float y)	平移坐标系统