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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！