canvas 实现绘画板

最新推荐文章于 2024-05-10 10:10:22 发布

-Whonow�

最新推荐文章于 2024-05-10 10:10:22 发布

阅读量832

点赞数

分类专栏： JavaScript vue 前端文章标签： vue.js javascript 前端 canvas

本文链接：https://blog.csdn.net/whonow33/article/details/122364775

版权

canvas 实现绘画板

起始：使用HTML5的canvas特性，在Vue+element项目中，结合JS实现你画我猜小游戏绘画板，也可以满足订单在确认时候签名的需求。保存了鼠标的轨迹，还有绘画圆形、正方形，切换画笔颜色，清除画板等功能。也可以将其保存为一张图片。

最终效果展示：

代码实现：

创建canvas元素

<canvas
     id="canvas"
     width="800"
     ref="canvas"
     height="400"
     @mousedown="canvasDown"
     @mousemove="canvasMove"
     @mouseout="canvasUp"
     @mouseup="canvasUp"
></canvas>

初始化画布

//初始化canvas
 initCanvas() {
   
     (this as any).canvasDom = this.$refs.canvas;
     this.ctx = (this as any).canvasDom.getContext("2d");
   }

画笔、圆形、正方形功能

<div
      class="drawingBoard"
      style="
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        margin-left: 274px;
      "
    >
      <el-button @click="changeType('huabi')" type="primary">画笔</el-button>