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.渐变