canvas基本

基本

1. 支持ie 9+，firefox，opera，chrome，safari

2. html：

   <canvas id="fir_canvas" width="400" height="400">
   

3. Canvas API 使用了路径的表示法。但是，路径由一系列的方法调用来定义，比如调用 beginPath() 和 arc() 方法。一旦定义了路径，其他的方法，如 fill()，都是对此路径操作。绘图环境的各种属性，比如 fillStyle，说明了这些操作如何使用

方法

const canvas = document.getElementById('fir_canvas');
const ctx = canvas.getContent('2d');

1. getContext(“2d”) 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
2. dom
3. clearRect(x,y,width,height) 清空给定矩形内的指定像素

绘制路径（线）和线形成的封闭图形

ctx.strokeStyle = “#0000ff”; // 线条的颜色
ctx.lineWidth = 8; // 线条的粗细

1. 一条线

   ctx.moveTo(100,100);
   ctx.lineTo(500,500);
   ctx.stroke(); // 绘制
   

2. 一条拐弯的线(例子效果为一个折形)

   ctx.moveTo(2, 2);
   ctx.lineTo(16, 12);
   ctx.lineTo(2, 24);
   ctx.stroke();
   

   效果：

   

3. 例子二折形闭合成一个三角形

   ctx.moveTo(20, 20);
   ctx.lineTo(160, 120);
   ctx.lineTo(20, 240);
   ctx.lineTo(20, 20);
   ctx.lineWidth = 8;
   ctx.stroke();
   

   路径回到起始点即可，但这样在设置线条粗细过粗的时候会有一些问题：

   

   所以当绘制封闭图形时应该使用标准方法closePath()，见例五。

4. 多条例子二 beginPath()

   beginPath()方法，就会对之前绘制的路径进行清空，但不会回到(0,0)原点。

   // 共用的样式写在beginPath()外面
   ctx.beginPath();
   ctx.moveTo(2, 2);
   ctx.lineTo(16, 12);
   ctx.lineTo(2, 24);
     ctx.lineTo(2, 2);
   ctx.stroke();
   
   ctx.beginPath();
   ctx.moveTo(32, 2);
   ctx.lineTo(46, 12);
   ctx.lineTo(32, 24);
     ctx.lineTo(32, 2);
   ctx.stroke();
   
   ctx.beginPath();
   ctx.moveTo(62, 2);
   ctx.lineTo(76, 12);
   ctx.lineTo(62, 24);
     ctx.lineTo(62, 2);
   ctx.strok 大专栏  canvas基本eStyle = "#0000ff";
   ctx.stroke();
   

   效果

   

5. 封闭图形标准写法

   ctx.beginPath();
   ctx.moveTo(62, 2);
   ctx.lineTo(76, 12);
   ctx.lineTo(62, 24);// 省略了最后回到原点那句
   ctx.closePath();
   ctx.stroke();
   

用beginPath()第一句可以用moveTo()也可以用lineTo()
不用beginPath()得用moveTo();

6. 画矩形 正方形 （因为必须有宽高） strokeRect(x, y, width, height)

   strokeRect() 方法绘制矩形（不填色）。笔触的默认颜色是黑色。

   使用 strokeStyle 属性来设置笔触的颜色、渐变或模式

   ctx.lineWidth = 8;
   ctx.strokeStyle = "#333";
   ctx.strokeRect(10,10,200,200);
   

   效果

   

7. lineCap 属性 定义线段开头和结尾的形状

   butt（默认值），round，square

   效果（从上到下依次为butt round square）

   

   round只对线条的开头和结尾处有效果，对线段之间的连接处没有作用

8. lineJoin 属性 miterLimit 属性 线条与线条之间的连接方式

   lineJoin: miter(默认值，尖角) bevel（衔接） round（圆角）

   当lineJoin属性值是miter时，miterLimit起作用，默认值为10。

填充 fill() fillStyle | fillRect()

1. 先填充，再画边框

   ctx.beginPath();
   ctx.lineTo(100, 100);
   ctx.lineTo(200, 100);
   ctx.lineTo(200, 200);
   ctx.lineTo(100, 200);
   ctx.closePath();
   ctx.lineWidth = 8;
   ctx.fillStyle = "#ddd";
   ctx.fill();
   ctx.stroke();
   

   效果

   

2. fillRect(x,y,width,height)

   绘制“已填色”的矩形（因为必须有宽高）。默认的填充颜色是黑色。

   使用 fillStyle 属性来设置用于填充绘图的颜色、渐变或模式。如果不设置fillStyle则使用默认的黑色。

   在例六的基础上

   ctx.lineWidth = 8;
   ctx.strokeStyle = "#333";
   ctx.fillStyle = "antiquewhite";
   ctx.fillRect(10,10,200,200);
   ctx.strokeRect(10,10,200,200);
   

   效果