javascript中canvas的绘画知识点大全

今天带大家学习用js绘画（canvas），首先呢先学习canvas的基础知识。
我们通常画画得需要一张纸或者一个画板，所以js画画也得需要一张画布
首先创建获取画布；
然后再获取2d

var ctx = canavs.getContext('2d');

1. 开新路径

ctx.beginPath();

2. 起始点
   x是横坐标，y是纵坐标
   ctx.moveTo(x, y);

3. 路径
   x是横坐标，y是纵坐标
   ctx.lineTo(x, y)

4. 闭合路径
   ctx.closePath()

5. 描边与填充
   ctx.stroke();
   ctx.fill();

6. 设置描边和填充的颜色
   ctx.strokeStyle = '颜色';
   ctx.fillStyle = '颜色';

7. 清除画布
   ctx.clearRect(x, y, width, height);

线的样式

1. 线的宽度
   ctx.lineWidth = 线的宽度

2. 线帽

ctx.lineCap = 'butt'//默认的
round: 半圆
square: 方形

圆

圆心:x, y是坐标
blur: 半径
start,end: 起始角度，结束角度
boolean: 是否为逆时针(true), 默认顺时针(false))
ctx.arc(x, y, blur, start, end, boolean)

保存状态

ctx.save(); // 保存当前的状态
ctx.restore(); //  返回上一级状态

1. 填充矩形
   x, y是坐标
   宽高：width, height

ctx.fillRect(x, y, width, height);

2. 绘制矩形路径
   宽高：width, height

ctx.rect(x, y, width, height)

3. 弧形
   参考点1坐标: x1, y1
   参考点2坐标: x2, y2
   所切选圆的半径：r

ctx.arcTo(x1, y1, x2, y2, r);

4. 填充字体
   content: 字体内容

ctx.fillText(content, x, y)

5. 描边字体
   content: 字体内容

ctx.strokeText(content, x, y);

6. 文本垂直居中

ctx.textBaseline = 'middle'; // top // bottom

7. 文本水平居中

ctx.textAlign = 'center'; // left // right