初学canvas

1.Canvas 元素用于在网页上绘制图形。

2.创建Canvas元素

<canvas id="myCanvas" width="200" height="100"></canvas>

3.操作Canvas元素对象

3.1获取Canvas元素及创建Context对象

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d"); //getContext() 方法返回一个用于在画布上绘图的环境。

 

用jQuery获取：var c=$("#myCanvas");/var c=$("#myCanvas").val;/var c=$("#myCanvas").html;调用getContext方法时报错,原因jQuery()返回的是jQuery对象，而jQuery对象是没有getContext方法的，需要把jQuery对象转换成DOM对象。

3.2操作Canvas对象

1.绘制矩形

ctx.fillStyle("#ff0000");//填充红色，在fillRect方法前生效
ctx.fillRect(20,20,150,100);//绘制矩形，参数分别对应x,y,width,height

 

fillStyle可选值：颜色（默认黑色），gradient(渐变对象)，pattern对象。

（1）gradient

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

var grd=ctx.createLinearGradient(0,0,170,0);//定义从黑到白的渐变（左->右），参数对应（渐变开始点的x坐标，渐变开始点的y坐标，渐变结束点的x坐标，渐变结束点的y坐标）
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");

ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);

 

2.绘制直线

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

ctx.moveTo(0,0);//直线起点坐标，参数对应(x,y)
ctx.lineTo(200,150);//直线终点坐标，参数对应(x,y)，可以设置多个lineTo来绘制折线
ctx.stroke();//执行绘制

 

3.绘制圆形

ctx.fillStyle = "#ff0000";
ctx.beginPath();//开始绘制
ctx.arc(100, 100, 50, 0, Math.PI * 2, true);//创建弧线/曲线，参数对应，（圆形x位置，圆心y位置，起始角，结束角，是否顺时针（false=顺时针，true=逆时针））
ctx.closePath();//结束绘制，此时完成一个闭合图形的绘制
//ctx.fill();//开始绘制图形
//ctx.stroke();//开始绘制线条

4.二次贝赛尔曲线

 ctx.lineWidth = 6;
 ctx.strokeStyle = "#ff0000";
 ctx.beginPath();
 ctx.moveTo(0, 200);
 ctx.quadraticCurveTo(75, 50, 300, 200);//参数对应（控制点x值，控制点y值，结束点x值，结束点y值）
 ctx.stroke();

5.三次贝赛尔曲线

 ctx.lineWidth = 6;
 ctx.strokeStyle = "#ff0000";
 ctx.beginPath();
 ctx.moveTo(0, 200);
 ctx.bezierCurveTo(205,56,239,439,429,236);//在二次贝塞尔曲线的基础上增加一个控制点，参数对应(控制点1x，控制点1y，控制点2x,控制点2y，结束点x,结束点y)
 ctx.stroke();

6.保存和恢复canvas

save方法用于临时保存画布坐标系统的状态

restore方法可以用来恢复save之后设置的状态,

 

4.与SVG比较

（截图来源360百科）