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