canvas：画布

画布有默认宽度，如果要自己设置宽带要写在属性上
列： <canvas id = "myCanvas" width = "600" height = "600"></canvas>

1.获取画布元素节点
2.通过画布节点获取画笔
let pen = myCanvas.getContext("2d");   第一个参数默认是“2d”
//  画实心矩形
pen.fillRect(x,y,width,height);
//画空心矩形
pen.strokeRect(x,y,width,height);
//画没有边框没有背景的矩形  --可以设置边框背景颜色
pen.rect(x,y,width,height);
pen.fill();  --- 画颜色
pen.stroke();
//清楚矩形区域
pen.clearRect(x,y,width,height);
//清空画布
pen.clearRect(0,0,myCanvas.width,myCanvas.height);
---------------------------------------------------------------
画路径
1.设置路径起点
pen.moveTo(x,y);
2.设置下一个坐标
pen.lineTo(x,y);
3.画线
pen.stroke();         只需要设置一个起点，后面都是设置下一个点，最后设置画线 ！！！！！！！！！！

---pen.closePath();  闭合路径
---pen.beginPath(); 清空路径容器
-------------------------------------------------------------------
样式
-改变填充颜色：
pen.fillStyle = "red";       ----样式写在前面
列：
pen.fillRect(0,0,100,100);

-改变线条(边框)颜色
pen.strokeStyle = "green";

-改变线条的宽度
pen.lineWidth = 10;   直接给数字，不需要单位
pen.lineJoin = "round"; -- 线条交界处的样式   round：圆角 bevel：
。斜角  默认-miter：直角
pen.lineCap = "round"; --线条两端的样式 round：圆角
----------------------------------------------------------------------
pen.save(); -- 保存
pen.restore(); -- 取

格式
pen.save();
//写样式
pen.beginPath();        画图固定结构
//画图像
pen.restore();
----------------------------------------------------------------------
画圆
pen.arc(x,y,r,起始弧度，结束弧度，绘制方向);
弧度 = 角度 * Math.PI / 180;

pen.fill();-实心
pen.stroke();-空心