canvas 绘制简单多边形

canvas

绘制多边形 – DOM结构

  <div class="box">
    <h1>绘图</h1>
    <div class="btns">
      <button @click="btn2">展示全部</button>
      <button @click="btn3">开始绘制数据</button>
    </div>
    <div v-for="(list, index) in arrData" :key="index">
      <el-button type="warning" @click="del(index)">删除第{
  { index }}个多边形</el-button>
    </div>
    <canvas id="tutorial" width="500" height="500"></canvas>
  </div>

绘制多边形 – css样式

.box {
   
  height: 1000px;
  width: 100%;
  background: seagreen;
}
canvas {
   
  border: 1px solid black;
}
.btns {
   
  display: flex;
  flex-direction: column;
}
.btns button {
   
  width: 100px;
  height: 30px;
}

绘制多边形—初始化

initCanvas() {
   
      canvas = document.getElementById('tutorial') 
      if (canvas.getContext) {
   
        ctx = canvas.getContext('2d')

      } else {
   
		console.log("暂不支持canvas")
      }
    },

• 绘制线

  • stroke() 通过线条来绘制图形轮廓。
  • closePath()闭合路径之后图形绘制命令又重新指向到上下文中。

  通过线条来绘制图形轮廓。(绘制三角形)

  ctx.beginPath();    // 新建一条路径,图形绘制命令被指向到路径上生成路径。
    ctx.moveTo(75, 50);  //移动笔触 将笔触移动到指定的坐标 x 以及 y 上。
    ctx.lineTo(100, 75);
    ctx.lineTo(100, 25);
    ctx.fill();                // 通过填充路径的内容区域生成实心的图形。

注意：
①当前路径为空，即调用 beginPath() 之后，或者 canvas 刚建的时候，第一条路径构造命令通常被视为是 moveTo（），无论实际上是什么。出于这个原因，你几乎总是要在设置路径之后专门指定你的起始位置。
②当你调用 fill() 函数时，所有没有闭合的形状都会自动闭合，所以你不需要调用 closePath() 函数。但是调用 stroke() 时不会自动闭合。

绘制多边形—点击绘制按钮

   // 按钮
   btn3() {
   
      ctx