const canvas = document.getElementById("canvas");
const cxt = canvas.getContext("2d");

cxt.beginPath(); // 开始绘制路径：得到绘制命令
cxt.moveTo(20, 30); // 路径的起点
cxt.lineTo(45, 50); // 绘制直线
cxt.lineTo(30, 80); // 绘制直线
cxt.fillStyle = "#070" // 填充的颜色
cxt.fill(); // 填充路径，自动闭合 

cxt.beginPath();
cxt.lineTo(60, 50);
cxt.lineTo(70, 90); 
cxt.strokeStyle = "red";
cxt.stroke();
cxt.closePath();

cxt.beginPath();
cxt.arc(100, 150, 20, 0, 2,true);
// 有透明度
cxt.fillStyle= "rgba(180,7,247, 0.2)";
cxt.fill();

cxt.beginPath();
cxt.fillStyle="#1dccce";
cxt.fillRect(100, 50, 40, 40);
cxt.fill();

cxt.beginPath();
cxt.strokeStyle="#FFDD42";
cxt.strokeRect(150, 50, 40, 40);
cxt.closePath();