画布：

canvas

在页面上规划出一块空间，canvas标签，通过javascript控制画布完成绘制

1.获取画布

var canvas=document.getElementById("");

2.获取上下文对象 （获取画笔）

var cx=canvas.getContext("2d");

3.设置画笔样式

cx.fillStyle='red'; cx.strokeStyle='blue';

4.开始绘制

绘制图形：

1.矩形

fillRect(x,y,w,h);:实心填充元素 strokeRect(x,y,w,h);：描边 x,y:当前矩形开始绘制的位置坐标 w,h:当前矩形的宽高

2.绘制圆形

cx.beginPath(); cx.arc(x,y,r,begin,end,c);//设置圆 x,y:圆的圆心坐标 r：圆的半径 begin，end：开始角度和结束角度；Math.PI=180 Math.PI/180=1度 c：是否按照逆时针进行绘制 true：按照逆时针 false：顺时针 cx.closePath(); cx.fill();//实心填充 cx.stroke();//描边

3.绘制线段

moveTo(x,y): x,y:线段的起点坐标 lineTo(x,y) x,y:线段的终点坐标 cx.stroke(); //fill():不能使用 lineWidth=number;

4.绘制渐变图形

线性渐变： var g=createLinearGradient(bx,by,ex,ey): bx,by:渐变的开始位置坐标 ex,ey:渐变结束位置的坐标 g.addColorStop(offset,color); offset:0-1之间的偏移量 color：设置的颜色值 当前方法至少调用两次 cx.fillStyle=g; //绘制图形 径向渐变： createRadialGradient(bx,by,br,ex,ey,er) bx,by:开始圆的圆心位置 br:开始圆的半径 ex,ey:结束圆的圆心位置 er：结束圆的半径

5.变形

1.平移 translate(x,y): x,y:将坐标原点平移单位 2.扩大 scale(x,y): x:代表的是水平方向上的放大倍数 y：代表的是垂直方向上的放大倍数（如果想要缩小，参数设置为0-1之间的值） 放大坐标 3.旋转 rotate(angle): angle:旋转角度，旋转的中心点就是坐标轴的原点 默认按照顺时针进行旋转，想要进行逆时针旋转，角度设置为负数即可 4.保存和回滚 [save1,save2,save3] save():将当前的绘画状态进行保存并存入状态栈 restore():该方法每次调用只会回滚到上一次save的状态

6.图形组合

globalCompositeOperation=type; type:图形组合的方式 该属性一定要用在两个图形之间 type:string source-over:将新图形覆盖在原图形之上 destination-over:在原图形之下绘制新图形 source-in:新图形和原油图形做in计算，只显示新图形中和原油图形重叠的部分，其他部分均变为透明 destination-in:新图形和原油图形做in计算，只显示原有图形中和新图形重叠的部分，其他部分均变为透明 source-out:新图形和原油图形做out计算，只显示新图形中和原油图形不重叠的部分，其他部分均变为透明 destination-out:新图形和原油图形做out计算，只显示原有图形中和新图形不重叠的部分，其他部分均变为透明 source-atop:绘制新图形中与原有图形重叠部分并且保留原有图形未重叠部分；新图形其他部分变为透明 destination-atop:绘制新图形中与原图形重叠部分并且保留新图形未重叠部分；原有图形其他部分变为透明 lighter： 原图形和新图形均进行绘制，重叠部分进行加色处理 xor： 绘制新图形和原图形不重叠部分，重叠部分变为透明 copy： 只绘制新图形，原图形中不与新图形重叠的部分变为透明

7.绘制文本

cx.font='16px blod'; fillText(str,x,y,px); strokeText(str,x,y,px); str:绘制文本字符串 x,y:文本的显示坐标 px：可选参数，文本的最大的像素宽度