Canvas入门

一、基础：

1、Canvas画布，行内元素

2、画笔：var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

3、<canvas>内容可见则浏览器支持，IE8以上支持</canvas>

4、ctx.moveTo(100,100);

ctx.lineTo(200,200);//线

5、ctx.stroke();//绘制，此为空心的

ctx.fill();//填充，实心的

6、strokeStyle  fillStyle

ctx.strokeStyle = 'green';//color可设颜色;gradient可设渐变对象;pattern可创建pattern笔触的pattern对象

二、矩形

1、等效（1）ctx.rect(5.5,5.5,100,100)

ctx.stroke();//矩形，参数为(x,y,w,h)横纵坐标及宽长

（2）ctx.strokeRect(5.5,5.5,100,100);

2、等效（1）ctx.rect(5.5,5.5,100,100)

ctx.fill();

（2）ctx.fillRect(5.5,5.5,100,100);

3、5.5的y坐标经一像素描边占据1像素（5至6）,5的y坐标经一像素向左向右0.5描边，同时像素不能只占0.5所以最终占据2像素（5至7）。

三、文字

1、fillText(text,x,y,[maxWidth]);  //填充文字

strokeText(text,x,y,[maxWidth]); //描边文字

ctx.font="20px Arial";//canvas元素CSS样式设置无效，必须font设置参数：font-style font-variant font-weight font-size font-family，分别表示的意思是字体样式（如倾斜），是否大小写，字体粗细，字体大小，字体

ctx.textBaseline = "bottom";//文字基准线

ctx.textAlign = 'left';// 参数：left(默认，文本左对齐),right（文本右对齐）,center（文本在指定位置居中）,start（文本开始位置）,end（文本结束位置）

ctx.fillText('你想对我说什么',0,20);

2、ctx.shadowOffsetX = 5;

ctx.shadowOffsetY = 5;

ctx.shadowBlur = 5;

ctx.shadowColor = '#000';

shadowOffsetX  阴影距形状的水平距离

shadowOffsetY  阴影距形状的垂直距离

shadowBlur  阴影的模糊级别，这里是高斯模糊，默认值为0

shadowColor  阴影的颜色,必须设置，默认无，而非是和文字颜色一致

3、var txt = "快告诉我们我自己有多宽";

var w = ctx.measureText(txt).width;//返回文本的宽度，单位为像素

参考：http://www.cnblogs.com/liugang-vip/p/5360283.html

四、线

1、ctx.beginPath();//画笔重新落点，不画之前的部分

ctx.closePath();//连接起点和终点

ctx.stroke()和ctx.fill()会影响所有未重新起笔的画笔

实例：ctx.beginPath();

ctx.strokeStyle = 'red';

ctx.moveTo(50,50);

ctx.lineTo(100,100);

ctx.lineTo(50,200);

ctx.closePath();

ctx.stroke();

2、ctx.lineJoin = 'miter';//两线交叉的拐角类型，参数：

miter ： 尖角 默认

bevel ： 斜角

round ： 圆角

3、ctx.lineCap = 'butt';//设置或返回线条的结束端点样式

参数：

butt 默认。向线条的每个末端添加平直的边缘。

round  向线条的每个末端添加圆形线帽。

square 向线条的每个末端添加正方形线帽。

4、（1）arc(x,y,r,sAngle,eAngle,counterclockwise)

x,y表示坐标点表示圆心坐标，r表示半径，sAngle表示开始弧度，eAngle表示结束弧度，counterclockwise表示顺时针还是逆时针方式，默认为顺时针false，逆时针为true

（2）360° = 2∏;

（3）ctx.beginPath();

ctx.arc(80,100,50,0,180*Math.PI/180,false);       

ctx.stroke();

ctx.beginPath();

ctx.arc(200,100,50,0,180*Math.PI/180,true);

ctx.stroke();

5、（1）arcTo(x1,y1,x2,y2,r) 创建两个切线之间的弧/曲线

参数：x1,y1 表示第一个坐标，x2,y2表示第二个坐标，r表示曲线半径

（2）ctx.beginPath();

ctx.moveTo(100,20); //弧的起点                 

ctx.arcTo(150,20,150,70,50); //负责定位切线的两个点，后一个点是切点，也是弧的终点，半径负责定位切点处的圆心，圆心到弧起点的距离如果是半径，则此弧是圆弧        

ctx.stroke();

参考：http://www.cnblogs.com/liugang-vip/p/5364292.html

五、清空画布（三种方式）

（1）canvas.height=canvas.height;

（2）ctx.clearRect(0,0,c.width,c.height);

（3）ctx.fillStyle="#000000";  

   ctx.beginPath();  

   ctx.fillRect(0,0,c.width,c.height);  

 ctx.closePath();  

参考：https://blog.csdn.net/u010484625/article/details/46046217

 

六、贝塞尔曲线

1、quadraticCurveTo(cpx,cpy,x,y)  二次贝塞尔曲线

参数：cpx,cpy 表示第一个控制点，x,y 表示结束点

二次贝塞尔曲线的大致规律：从起始点出发，曲线越靠近控制点，曲线越陡，然后慢慢远离控制点，曲线随即越来越平缓，直到结束点，并且此曲线会与起始点和结束点相切

2、bezierCurveTo(cpx1,cpy1,cpx2,cpy2,x,y)  三次贝塞尔曲线

参数：cpx1,cpy1表示第一个控制点，cpx2,cpy2表示第二个控制点  x,y表示结束点

包括起始点一起4个点来决定一条曲线，这个跟二次贝塞尔曲线的原理是一样一样的，只是多一个控制点，其精髓还是那句话：曲线靠近控制点，曲线越陡，远离控制点，曲线越平

3、正弦图

ctx.beginPath();

ctx.moveTo(20,150);

ctx.bezierCurveTo(20,50,150,50,150,150);

ctx.stroke();

ctx.beginPath();

ctx.moveTo(150,150);

ctx.bezierCurveTo(150,250,280,250,280,150);

ctx.stroke();

七、渐变色

（1）CSS线性渐变

横向：

.box1{

    width:500px;

    height:50px;

    background: -webkit-linear-gradient(left, red 0%, #0F0 20%,rgb(51,102,255) 50%, rgba(204,255,0,0.8) 100%);

}

斜向：

.box1{

    width:500px;

    height:50px;

    background: -webkit-linear-gradient(45deg , red 0%, #0F0 20%,rgb(51,102,255) 50%, rgba(204,255,0,0.8) 100%);

}

（2）径向渐变：

中心发散：

.box2{

    width:300px;

    height:200px;

    background:-webkit-radial-gradient(red 0%, #0F0 20%,rgb(51,102,255) 50%, rgba(204,255,0,0.8) 100%);

}

左下发散：

.box2{

    width:300px;

    height:200px;

    background:-webkit-radial-gradient(bottom left, ellipse,red 0%, #0F0 20%,rgb(51,102,255) 50%, rgba(204,255,0,0.8) 100%);

}

（3）canvas线性渐变：

var line = ctx.createLinearGradient(50,50,200,50);//渐变起点及终点，决定线性渐变的方向

        line.addColorStop(0,'red');//占渐变范围的渐变色，起渐变标志作用

        line.addColorStop(0.2 ,'#0F0');

        line.addColorStop(0.5 ,'rgb(51,102,255)');

        line.addColorStop(1 ,'rgba(204,255,0,0.8)');

        

        ctx.fillStyle = line;

        ctx.fillRect(50,50,200,50);

（4）canvas径向渐变：

var line = ctx.createRadialGradient(150,150,0,150,150,200);

line.addColorStop(0,'red');

line.addColorStop(0.2 ,'#0F0');

line.addColorStop(0.5 ,'rgb(51,102,255)');

line.addColorStop(1 ,'rgba(204,255,0,0.8)');

        

ctx.fillStyle = line;

ctx.fillRect(50,50,200,150);

（4）文字渐变色

ctx.font = "40px 微软雅黑";

var line = ctx.createLinearGradient(10,100,200,100);

line.addColorStop(0,'red');

line.addColorStop(0.2 ,'#0F0');

line.addColorStop(0.5 ,'rgb(51,102,255)');

line.addColorStop(1 ,'rgba(204,255,0,0.8)');

ctx.fillStyle = line;

ctx.fillText("狂拽炫酷吊炸天",10,100);

八、透明

（1）globalAlpha = num    参数：num取值0-1之间   设置或返回绘图的当前透明值

（2）ctx.save();

ctx.beginPath();

ctx.globalAlpha = 0.5;

ctx.fillStyle = "red";

ctx.fillRect(50,50,100,100);

ctx.closePath();

ctx.restore();//封闭透明的影响范围

 

ctx.beginPath();

ctx.fillStyle = "green";

ctx.fillRect(100,100,100,100);

ctx.closePath();

        

ctx.beginPath();

ctx.fillStyle = "blue";

ctx.fillRect(150,150,100,100);

ctx.closePath();

（4）文字透明：

ctx.font = "40px 微软雅黑";

var line = ctx.createLinearGradient(10,100,200,100);

line.addColorStop(0,'red');

line.addColorStop(0.2 ,'#0F0');

line.addColorStop(0.5 ,'rgb(51,102,255)');

line.addColorStop(1 ,'rgba(204,255,0,0.8)');

ctx.fillStyle = line;

ctx.globalAlpha = 0.3;

ctx.fillText("狂拽炫酷吊炸天",10,100);

参考：http://www.cnblogs.com/liugang-vip/p/5383164.html