Canvas | 绘制矩形、实心空心圆、三角形、线条

#Canvas

##基本属性

• 一个画布在网页中是一个矩形框
• 默认情况下 canvas 元素没有边框和内容。使用 style 属性来添加边框:
• canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：

JavaScript绘制

• getContext(“2d”) 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法

绘制矩形

// 绘制矩形
ctx.beginPath();
ctx.fillStyle="#34c24e";
ctx.fillRect(25,0,150,20);
ctx.closePath();

绘制线条

// 绘制线条
// stroke() 方法默认颜色是黑色（如果css设置了border颜色，则为css颜色）
ctx.beginPath();
ctx.moveTo(0,40);
ctx.lineTo(200,40);
ctx.stroke();
ctx.closePath();

绘制圆

// 绘制空心/实心圆形
ctx.beginPath();
ctx.arc(100,80,25,0,2*Math.PI);//x,y是圆心
ctx.strokeStyle="#34c24e";  // 将线条颜色设置为蓝色
ctx.stroke();
// ctx.fill(); //开始填充，空心/实心取决于这个
ctx.closePath();

绘制三角形

// 绘制三角形
ctx.beginPath();
ctx.moveTo(100,125);
ctx.lineTo(70,165);
ctx.lineTo(130,165);
ctx.lineTo(100,125); // 只用三个点的坐标就可以了，不用闭环 //如果要涉及到边框则需要闭环
ctx.fill(); //开始填充，空心/实心取决于这个
ctx.stroke();
ctx.closePath();