canvas之2D上下文

1.填充和描边

（1）fillStyle

（2）strokeStyle

2.绘制矩形

（1）fillRect()

（2）strokeRect()

（3）clearRect()   :清除画布上的矩形区域

<canvas id = "drawing" width="400px" height="400px" style="background-color: #d1f1ff"></canvas>

         var drawing = document.getElementById("drawing");
         if(drawing.getContext){
             var ct = drawing.getContext("2d");
         }

         ct.fillStyle = "#ff0000";
         ct.fillRect(10,10,50,50);

         ct.fillStyle = "rgba(0,0,255,0.5)";
         ct.fillRect(30,30,50,50);

         ct.clearRect(40,40,10,10);

3.绘制路径

　　（1）arc(x,y,radius,startAngle,endAngle,countercockwise)

　　 　　 以（x,y）画圆，radius为半径，startAngle：起始角度，endAngle：结束角度，countercockwise：是否按逆时针方向转动，false表示按逆时针转动。

　　（2）arcTo(x1,y1,x2,y2,radius)

　　  　　从（x1,y1）到（x2,y2）画一条半径为radius的弧线

　　（3）bezierCurveTo(c1x,c1y,c2x,c2y,x,y)

　　 　　贝塞尔曲线，详细的看我的SVG--贝塞尔曲线的博客

　　（4）lineTo(x,y)

　　 　　从上一点开始画一条线到（x,y）

　　（5）moveTo(x,y)

　　  　　将绘图游标移到（x,y）

　　（6）quadraticCurveTo(cx,cy,x,y)

　　 　　绘制二次曲线到（x,y），以（cx,cy）作为控制点

　　（7）rect(x,y,width,height)

　　 　　从(x,y)开始绘制一个矩形

4.绘制文本

　　font: 文本样式，大小，字体

　　textAlign：文本对齐方式（start,end,left,right,center）

　　textBaseline ：文本的基线

　　ct.fillText("文本",100,20)：

5.变换

　　rotate(): 旋转

　　scale()：缩放

　　translate(x,y) ：移动到（x,y）

　　transform()：

　　setTransform()：

     ct.beginPath();
     //外圆
     ct.arc(100,100,99,0, 2*Math.PI ,false);

     //内圆
     ct.moveTo(194,100);
     ct.arc(100,100,94,0, 2*Math.PI ,false);

     ct.translate(100,100);
     //旋转
     ct.rotate(90*Math.PI/180);

     ct.moveTo(0,0);
     ct.lineTo(0,-85);

     ct.moveTo(0,0);
     ct.lineTo(-65,0);

     ct.stroke();

这是旋转90度后

6.绘制图像

 var img = new Image();
     img.src = "share1.jpg";

     ct.drawImage(img ,0,0,120,120);

7.阴影

　　阴影共四个属性设置：

　　shadowColor :阴影颜色

　　shadowBlur ：模糊像素数

　　shadowOffsetX ：阴影偏移量

　　shadowOffsetY ：阴影偏移量

     //设置阴影
     ct.shadowColor="rgba(0,0,0,0.5)";
     ct.shadowBlur = 4;
     ct.shadowOffsetX = 5;
     ct.shadowOffsetY = 5;

     //红色矩形
     ct.fillStyle="#ff0000"
     ct.fillRect(10,10,50,50);

     //蓝色矩形
     ct.fillStyle="rgba(0,0,255,1)"
     ct.fillRect(30,30,50,50);
     ct.stroke();

8.渐变

渐变由CanvasGradient实例表示。

创建线性渐变：createLinearGradient(x,y,_x,_y)

创建线性渐变：createRadialGradient(x,y,radius,_x,_y,_radius)

(1)线性渐变：

     //红色矩形
     ct.fillStyle="#ff0000"
     ct.fillRect(10,10,50,50);

     //渐变色矩形
     var gradient = ct.createLinearGradient(30,30,70,70);
     gradient.addColorStop(0,"white");
     gradient.addColorStop(1,"black")

     ct.fillStyle=gradient;
     ct.fillRect(30,30,50,50);
     ct.stroke();

     //用于更好定位的渐变函数
     function createRectLinearGradient(context,x,y,width,height){
         return context.createLinearGradient(x,y,x+width,y+height);
     }

     //渐变色矩形
     var gradient = createRectLinearGradient(ct,30,30,50,50);
     gradient.addColorStop(0,"white");
     gradient.addColorStop(1,"black")

     ct.fillStyle=gradient;
     ct.fillRect(30,30,50,50);
     ct.stroke();

(2)径向渐变：

前三个参数为起点圆的圆心和半径，后三个参数为终点圆的圆心和半径

     //红色矩形
     ct.fillStyle="#ff0000"
     ct.fillRect(10,10,50,50);

     //径向渐变
     var gt = ct.createRadialGradient(55,55,10,55,55,30);
     gt.addColorStop(0,"white");
     gt.addColorStop(1,"black");
     ct.fillStyle = gt;
     ct.fillRect(30,30,50,50);

9.渐变

渐变由CanvasGradient实例表示。

创建线性渐变：createLinearGradient(x,y,_x,_y)

创建线性渐变：createRadialGradient(x,y,radius,_x,_y,_radius)

(1)线性渐变：