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>

 1         var drawing = document.getElementById("drawing");
 2         if(drawing.getContext){
 3             var ct = drawing.getContext("2d");
 4         }
 5
 6         ct.fillStyle = "#ff0000";
 7         ct.fillRect(10,10,50,50);
 8
 9         ct.fillStyle = "rgba(0,0,255,0.5)";
10         ct.fillRect(30,30,50,50);
11
12         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()：

 1     ct.beginPath();
 2     //外圆
 3     ct.arc(100,100,99,0, 2*Math.PI ,false);
 4
 5     //内圆
 6     ct.moveTo(194,100);
 7     ct.arc(100,100,94,0, 2*Math.PI ,false);
 8
 9     ct.translate(100,100);
10     //旋转
11     ct.rotate(90*Math.PI/180);
12
13     ct.moveTo(0,0);
14     ct.lineTo(0,-85);
15
16     ct.moveTo(0,0);
17     ct.lineTo(-65,0);
18
19     ct.stroke();

这是旋转90度后

6.绘制图像

1 var img = new Image();
2     img.src = "share1.jpg";
3
4     ct.drawImage(img ,0,0,120,120);

7.阴影

　　阴影共四个属性设置：

　　shadowColor :阴影颜色

　　shadowBlur ：模糊像素数

　　shadowOffsetX ：阴影偏移量

　　shadowOffsetY ：阴影偏移量

 1     //设置阴影
 2     ct.shadowColor="rgba(0,0,0,0.5)";
 3     ct.shadowBlur = 4;
 4     ct.shadowOffsetX = 5;
 5     ct.shadowOffsetY = 5;
 6
 7     //红色矩形
 8     ct.fillStyle="#ff0000"
 9     ct.fillRect(10,10,50,50);
10
11     //蓝色矩形
12     ct.fillStyle="rgba(0,0,255,1)"
13     ct.fillRect(30,30,50,50);
14     ct.stroke();

8.渐变

渐变由CanvasGradient实例表示。

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

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

(1)线性渐变：

 1     //红色矩形
 2     ct.fillStyle="#ff0000"
 3     ct.fillRect(10,10,50,50);
 4
 5     //渐变色矩形
 6     var gradient = ct.createLinearGradient(30,30,70,70);
 7     gradient.addColorStop(0,"white");
 8     gradient.addColorStop(1,"black")
 9
10     ct.fillStyle=gradient;
11     ct.fillRect(30,30,50,50);
12     ct.stroke();

 1     //用于更好定位的渐变函数
 2     function createRectLinearGradient(context,x,y,width,height){
 3         return context.createLinearGradient(x,y,x+width,y+height);
 4     }
 5
 6     //渐变色矩形
 7     var gradient = createRectLinearGradient(ct,30,30,50,50);
 8     gradient.addColorStop(0,"white");
 9     gradient.addColorStop(1,"black")
10
11     ct.fillStyle=gradient;
12     ct.fillRect(30,30,50,50);
13     ct.stroke();

(2)径向渐变：

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

 1     //红色矩形
 2     ct.fillStyle="#ff0000"
 3     ct.fillRect(10,10,50,50);
 4
 5
 6     //径向渐变
 7     var gt = ct.createRadialGradient(55,55,10,55,55,30);
 8     gt.addColorStop(0,"white");
 9     gt.addColorStop(1,"black");
10     ct.fillStyle = gt;
11     ct.fillRect(30,30,50,50);

9.渐变

渐变由CanvasGradient实例表示。

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

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

(1)线性渐变：