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)线性渐变：