canvas

canvas --- 简单点说： 就是画布， html5 出现的新标签， 它有自己本身的属性、方法、事件， 可以通过js来调用他进行绘图

ie9以上支持

context ：封装了很多绘图功能的对象，获取对象的方法：

var cxt = canvas.getContext('2d'); 

 

canvas绘图：

---

 

方法一：

cxt.fillStyle;

cxt.fill();

或者： 

cxt.fillRext(x, y, width, height );

方法二： 

cxt.strokeStyle;

cxt.stroke();

或者：

cxt.strokeRect(x, y, width, height);

---

 

 

cxt.lineWidth //图形边框宽度，边框为线宽的中线部分

cxt.lineCap //返回线条末端线帽的样式 －－－－参数 butt: 默认， 向线条的每个末端添加平直的边缘

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

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

---

 

绘制颜色

---

 

cxt.fillStyle = 'red';

cxt.strokeStyle = 'skyblue'; 

---

 

矩形绘制

---

 

方法一： 

cxt.strokeRect(); 上面提及

方法二： 

//路径绘制开始

cxt.beginPath();

//开始绘制的起始坐标点

cxt.moveTo(x, y);

//绘制结束的坐标点

cxt.lineTo(x1, y2);

cxt.stroke();

//路径绘制结束

cxt.closePath();

圆绘制

---

 

cxt.arc(x, y, r, 起始弧度， 结束弧度，false);

参数详解： 

x: 圆心的x坐标点

y: 圆心的y坐标点

r: 圆的半径

最后一个参数： 顺时针画圆还是逆时针画圆， true：逆时针；false： 顺时针

转载于:https://www.cnblogs.com/zhao12354/p/5851046.html