【无标题】vue canvas画多边形

已于 2022-08-09 19:18:35 修改
阅读量456 收藏 1
点赞数
文章标签： javascript 开发语言 ecmascript
于 2022-08-09 15:56:04 首次发布
原文链接：https://blog.csdn.net/qq_45612211/article/details/125378523?ops_request_misc=&request_id=&biz_id=102&utm_term=vue%E9%BC%A0%E6%A0%87%E7%BB%98%E5%88%B6%E5%A4%9A%E8%BE%B9%E5%BD%A2%EF%BC%8C%E5%8F%AF%E8%87%AA%E5%8A%A8%E5%90%B8%E9%99%84%E9%97%AD%E5%90%88&utm_me
版权

绘制单个多边形

<template>
  <div>
    <div>
      <button @click="onClear">清空</button>
    </div>
    <div>
      <canvas
        id="mycanvas"
        ref="mycanvas"
        width="700"
        height="450"
        @mousedown="canvasDown($event)"
        @mousemove="canvasMove($event)"
        @mouseup="canvasUp($event)"
        @dblclick="doubleclick()"
      >浏览器不持之canvas</canvas>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isdraw: false, //是否在画图形
      ctx: null, //canvas对象
      coordinates: [], //一个多边形的坐标信息
      cor_index: 0, //当前多边形的索引
      endtip: false //是否结束一个多边形的绘制
    };
  },
  mounted() {
    this.initDraw();
  },
  methods: {
    initDraw() {
      //初始化画布对象
      const canvas = document.querySelector("#mycanvas");
      this.ctx = canvas.getContext("2d"); //getContext() 方法返回一个用于在画布上绘图的环境,2d二维绘图
      this.ctx.strokeStyle = "rgb(0, 195, 155)"; //图形边框颜色
    },
    // 清空
    onClear() {
      this.coordinates = [];
      this.isdraw = false;
      this.endtip = false;
      this.ctx.clearRect(0, 0, 700, 450); //在给定的矩形内清除指定的像素
    },
    // 按下鼠标左键时--------------------------------------
    canvasDown(e) {
      console.log("点击");
      var x = e.offsetX;
      var y = e.offsetY;
      //获取鼠标按下的坐标，放入数组中
      this.coordinates.push({ cor_x: x, cor_y: y });
      this.drawcircle();
      this.isdraw = true; //正在画多边形
      if (this.endtip) {
        this.endtip = false; //清空，重新画
        console.log("重新画");
      }
      console.log(this.coordinates);
    },
    // 鼠标移动时----------------------------------------------------------
    canvasMove(e) {
      //没开始画或者结束画之后不进行操作
      if (this.coordinates.length == 0 || !this.isdraw || this.endtip) {
        return;
      }
      var x = e.offsetX;
      var y = e.offsetY;
      //获取上一个点
      var last_x = this.coordinates[this.coordinates.length - 1].cor_x;
      var last_y = this.coordinates[this.coordinates.length - 1].cor_y;
      this.ctx.clearRect(0, 0, 700, 450); //清空画布
      this.drawline(); //把之前的点连线
      this.drawcircle(); //画之前的点

      //获取鼠标移动时的点，画线，实现线段跟踪效果。
      this.ctx.beginPath();
      this.ctx.moveTo(last_x, last_y);
      this.ctx.lineTo(x, y); //追踪鼠标
      this.ctx.stroke(); //绘制已定义的路径 追踪鼠标
      //   this.ctx.closePath();
    },
    // 释放鼠标按钮-------------------------------------------------
    canvasUp(e) {},
    // 双击按钮时---------------------------------------
    doubleclick() {
      console.log("双击");
      //双击画布，在最后一个点的时候双击，自动连线第一个点，同时宣告画结束
      var x0 = this.coordinates[0].cor_x;
      var y0 = this.coordinates[0].cor_y;
      var x1 = this.coordinates[this.coordinates.length - 1].cor_x;
      var y1 = this.coordinates[this.coordinates.length - 1].cor_y;
      this.ctx.beginPath();
      this.ctx.moveTo(x0, y0);
      this.ctx.lineTo(x1, y1);
      this.ctx.stroke();
      //   this.ctx.closePath();
      this.isdraw = false;
      this.endtip = true;
      this.coordinates.pop();
      //   this.drawcircle();

      this.ctx.fillStyle = "rgba(0, 195, 155,0.4)";
      var bx = this.coordinates[0].cor_x;
      var by = this.coordinates[0].cor_y;
      this.ctx.beginPath();
      this.ctx.moveTo(bx, by);
      for (var k = 1; k < this.coordinates.length; k++) {
        var x = this.coordinates[k].cor_x;
        var y = this.coordinates[k].cor_y;
        this.ctx.lineTo(x, y);
      }
      this.ctx.fill();
      //   this.ctx.closePath();
      console.log(this.coordinates);
      this.coordinates = [];
    },
    //画线-把当前绘制的多边形之前的坐标线段绘制出来
    drawline() {
      for (var i = 0; i < this.coordinates.length - 1; i++) {
        this.ctx.beginPath();
        var x0 = this.coordinates[i].cor_x;
        var y0 = this.coordinates[i].cor_y;
        var x1 = this.coordinates[i + 1].cor_x;
        var y1 = this.coordinates[i + 1].cor_y;
        this.ctx.moveTo(x0, y0);
        this.ctx.lineTo(x1, y1);
        this.ctx.stroke();
        // this.ctx.closePath();
      }
    },
    //画点-把当前绘制的多边形之前的端点画圆
    drawcircle() {
      this.ctx.fillStyle = "rgb(0, 195, 155)";
      for (var i = 0; i < this.coordinates.length; i++) {
        var x = this.coordinates[i].cor_x;
        var y = this.coordinates[i].cor_y;
        this.ctx.beginPath(); //起始一条路径，或重置当前路径
        this.ctx.moveTo(x, y); //把路径移动到画布中的指定点（x,y）开始坐标
        this.ctx.arc(x, y, 5, 0, Math.PI * 2); //点
        this.ctx.fill(); //填充点
        // this.ctx.closePath();//创建从当前点回到起始点的路径
      }
    }
  }
};
</script>
<style lang="scss"  scoped>
.main {
  height: 90vh;
  color: black;
  background: white;
}
#mycanvas {
  border: 1px solid red;
  position: fixed;
  left: 0;
  right: 0;
  margin: auto;
}
</style>

绘制多个多边形 最终版本 包含判断线段交叉

<template>
  <div>
    <div>
      <div v-for="(item,index) in all_coordinates" :key="index">
        区域{{index+1}}
        <el-input :maxlength="20" v-model="item.identify" placeholder="请输入区域名称" clearable></el-input>
      </div>
      <button @click="onClear">清空</button>
    </div>
    <div>
      <canvas
        id="mycanvas"
        ref="mycanvas"
        width="700"
        height="450"
        @mousedown="canvasDown($event)"
        @mousemove="canvasMove($event)"
        @mouseup="canvasUp($event)"
        @dblclick="doubleclick()"
      >浏览器不持之canvas</canvas>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isdraw: false, //是否在画图形
      ctx: null, //canvas对象
      coordinates: [], //一个多边形的坐标信息
      cor_index: 0, //当前多边形的索引
      endtip: false, //是否结束一个多边形的绘制
      all_coordinates: [] //所有多边形的信息
    };
  },
  mounted() {
    this.initDraw();
  },
  methods: {
    initDraw() {
      //初始化画布对象
      const canvas = document.querySelector("#mycanvas");
      this.ctx = canvas.getContext("2d"); //getContext() 方法返回一个用于在画布上绘图的环境,2d二维绘图
      this.ctx.strokeStyle = "rgb(0, 195, 155)"; //图形边框颜色
    },
    // 清空
    onClear() {
      this.all_coordinates = [];
      this.coordinates = [];
      this.isdraw = false;
      this.endtip = false;
      this.ctx.clearRect(0, 0, 700, 450); //在给定的矩形内清除指定的像素
    },
    // 按下鼠标左键时--------------------------------------
    canvasDown(e) {
      if (this.endtip) {
        if (this.all_coordinates.length < 10) {
          this.endtip = false; //清空，重新画
        } else {
          this.$message.warning("最多可绘制十个闭合的凸多边形区域");
          return;
        }
      }
      var x = e.offsetX;
      var y = e.offsetY;
      //获取鼠标按下的坐标，放入数组中
      var insertFlag = true;
      this.coordinates.forEach((item, index) => {
        if (item.cor_x == x && item.cor_y == y) {
          insertFlag = false;
        }
      });
      if (insertFlag) {
        this.coordinates.push({ cor_x: x, cor_y: y });
        // 判断相交
        var lineList = [];
        this.coordinates.forEach((item, index) => {
          if (index < this.coordinates.length - 1) {
            lineList.push([
              item.cor_x,
              item.cor_y,
              this.coordinates[index + 1].cor_x,
              this.coordinates[index + 1].cor_y
            ]);
          }
        });
        lineList.forEach((item, index) => {
          if (index > 0 && index < lineList.length - 1) {
            var flag = this.judgeIntersect(
              lineList[lineList.length - 1][0],
              lineList[lineList.length - 1][1],
              lineList[lineList.length - 1][2],
              lineList[lineList.length - 1][3],
              lineList[index - 1][0],
              lineList[index - 1][1],
              lineList[index - 1][2],
              lineList[index - 1][3]
            );
            if (flag) {
              console.log("相交");
              this.coordinates.pop();
            }
          }
        });
      }
      if (this.coordinates.length > 19) {
        this.$message.warning("每个区域最多可绘制20个点坐标");
        this.doubleclick();
        this.drawcircles();
        return;
      }
      this.drawcircle();
      this.isdraw = true; //正在画多边形
    },
    // 鼠标移动时----------------------------------------------------------
    canvasMove(e) {
      //没开始画或者结束画之后不进行操作
      if (this.coordinates.length == 0 || !this.isdraw || this.endtip) {
        return;
      }
      var x = e.offsetX;
      var y = e.offsetY;
      //获取上一个点
      var last_x = this.coordinates[this.coordinates.length - 1].cor_x;
      var last_y = this.coordinates[this.coordinates.length - 1].cor_y;
      this.ctx.clearRect(0, 0, 700, 450); //清空画布
      this.drawline(); //把之前的点连线
      this.drawcircle(); //画之前的点
      if (this.all_coordinates.length != 0) {
        //不止一个多边形，把多边形们画出来
        this.drawlines();
        this.drawcircles();
        this.fillarea();
      }
      //获取鼠标移动时的点，画线，实现线段跟踪效果。
      this.ctx.beginPath();
      this.ctx.moveTo(last_x, last_y);
      this.ctx.lineTo(x, y); //追踪鼠标
      this.ctx.stroke(); //绘制已定义的路径 追踪鼠标
      this.ctx.closePath();
    },
    // 释放鼠标按钮-------------------------------------------------
    canvasUp(e) {
      this.ctx.clearRect(0, 0, 700, 450); //清空画布
      this.drawline(); //把之前的点连线
      this.drawcircle(); //画之前的点
      if (this.all_coordinates.length != 0) {
        //不止一个多边形，把多边形们画出来
        this.drawlines();
        this.drawcircles();
        this.fillarea();
      }
    },
    // 双击按钮时---------------------------------------
    doubleclick() {
      console.log("双击");
      //双击画布，在最后一个点的时候双击，自动连线第一个点，同时宣告画结束
      var x0 = this.coordinates[0].cor_x;
      var y0 = this.coordinates[0].cor_y;
      var x1 = this.coordinates[this.coordinates.length - 1].cor_x;
      var y1 = this.coordinates[this.coordinates.length - 1].cor_y;
      this.ctx.beginPath();
      this.ctx.moveTo(x0, y0);
      this.ctx.lineTo(x1, y1);
      this.ctx.stroke();
      this.ctx.closePath();
      this.isdraw = false;
      this.endtip = true;
      //   this.coordinates.pop();
      this.all_coordinates.push(this.coordinates);
      //   this.drawcircle();
      this.ctx.fillStyle = "rgba(0, 195, 155,0.4)";
      var bx = this.coordinates[0].cor_x;
      var by = this.coordinates[0].cor_y;
      this.ctx.beginPath();
      this.ctx.moveTo(bx, by);
      for (var k = 1; k < this.coordinates.length; k++) {
        var x = this.coordinates[k].cor_x;
        var y = this.coordinates[k].cor_y;
        this.ctx.lineTo(x, y);
      }
      this.ctx.fill();
      this.ctx.closePath();
      console.log(this.coordinates);
      console.log(this.all_coordinates);
      this.coordinates = [];
    },
    //画线-把当前绘制的多边形之前的坐标线段绘制出来
    drawline() {
      for (var i = 0; i < this.coordinates.length - 1; i++) {
        this.ctx.beginPath();
        var x0 = this.coordinates[i].cor_x;
        var y0 = this.coordinates[i].cor_y;
        var x1 = this.coordinates[i + 1].cor_x;
        var y1 = this.coordinates[i + 1].cor_y;
        this.ctx.moveTo(x0, y0);
        this.ctx.lineTo(x1, y1);
        this.ctx.stroke();
        this.ctx.closePath();
      }
    },
    //画点-把当前绘制的多边形之前的端点画圆
    drawcircle() {
      this.ctx.fillStyle = "rgb(0, 195, 155)";
      for (var i = 0; i < this.coordinates.length; i++) {
        var x = this.coordinates[i].cor_x;
        var y = this.coordinates[i].cor_y;
        this.ctx.beginPath(); //起始一条路径，或重置当前路径
        this.ctx.moveTo(x, y); //把路径移动到画布中的指定点（x,y）开始坐标
        this.ctx.arc(x, y, 5, 0, Math.PI * 2); //点
        this.ctx.fill(); //填充点
        this.ctx.closePath(); //创建从当前点回到起始点的路径
      }
    },
    drawlines() {
      //把所有多边形画出来
      for (var i = 0; i < this.all_coordinates.length; i++) {
        var cors = this.all_coordinates[i];
        //前后坐标连线
        for (var j = 0; j < cors.length - 1; j++) {
          this.ctx.beginPath();
          var x0 = cors[j].cor_x;
          var y0 = cors[j].cor_y;
          var x1 = cors[j + 1].cor_x;
          var y1 = cors[j + 1].cor_y;
          this.ctx.moveTo(x0, y0);
          this.ctx.lineTo(x1, y1);
          this.ctx.stroke();
          this.ctx.closePath();
        }
        //最后一个与第一个连线
        var begin_x = cors[0].cor_x;
        var begin_y = cors[0].cor_y;
        var end_x = cors[cors.length - 1].cor_x;
        var end_y = cors[cors.length - 1].cor_y;
        this.ctx.beginPath();
        this.ctx.moveTo(begin_x, begin_y);
        this.ctx.lineTo(end_x, end_y);
        this.ctx.stroke();
        this.ctx.closePath();
      }
    },
    drawcircles() {
      //为所有的多边形端点画圆
      this.ctx.fillStyle = "rgb(0, 195, 155)";
      for (var i = 0; i < this.all_coordinates.length; i++) {
        var cors = this.all_coordinates[i];
        for (var j = 0; j < cors.length; j++) {
          var x = cors[j].cor_x;
          var y = cors[j].cor_y;
          this.ctx.beginPath();
          this.ctx.moveTo(x, y);
          this.ctx.arc(x, y, 5, 0, Math.PI * 2);
          this.ctx.fill();
          this.ctx.closePath();
        }
      }
    },
    // 颜色填充
    fillarea() {
      this.ctx.fillStyle = "rgba(0, 195, 155,0.4)";
      for (var i = 0; i < this.all_coordinates.length; i++) {
        var cors = this.all_coordinates[i];
        var x0 = cors[0].cor_x;
        var y0 = cors[0].cor_y;
        this.ctx.beginPath();
        this.ctx.moveTo(x0, y0);
        for (var j = 1; j < cors.length; j++) {
          var x = cors[j].cor_x;
          var y = cors[j].cor_y;
          this.ctx.lineTo(x, y);
        }
        this.ctx.fill();
        this.ctx.closePath();
      }
    },
    // 判断直线是否相交
    judgeIntersect(x1, y1, x2, y2, x3, y3, x4, y4) {
      if (
        !(
          Math.min(x1, x2) <= Math.max(x3, x4) &&
          Math.min(y3, y4) <= Math.max(y1, y2) &&
          Math.min(x3, x4) <= Math.max(x1, x2) &&
          Math.min(y1, y2) <= Math.max(y3, y4)
        )
      )
        return false;
      var u, v, w, z;
      u = (x3 - x1) * (y2 - y1) - (x2 - x1) * (y3 - y1);
      v = (x4 - x1) * (y2 - y1) - (x2 - x1) * (y4 - y1);
      w = (x1 - x3) * (y4 - y3) - (x4 - x3) * (y1 - y3);
      z = (x2 - x3) * (y4 - y3) - (x4 - x3) * (y2 - y3);
      return u * v <= 0.00000001 && w * z <= 0.00000001;
    }
  }
};
</script>
<style lang="scss"  scoped>
.main {
  height: 90vh;
  color: black;
  background: white;
}
#mycanvas {
  border: 1px solid red;
  position: fixed;
  left: 0;
  right: 0;
  margin: auto;
}
</style>
Canvas多边形绘制
09-24
javascript实现任意角度正多边形绘制canvas图形源码.
vue canvas画多边形
m0_63853518的博客
12-13 1324
记录一些技术基础
Vue前端实现在图片绘制四边形，并将四点坐标传递给后台
最新发布
hero8011的博客
09-13 492
vue前端实现在图片绘制四边形，并将四点坐标传递给后台
vue canvas绘制多边形
qie1138159096的博客
07-08 1225
canvas绘制多边形
vue canvas 绘制多个多边形，并且可以根据坐标数据回显
weixin_42178050的博客
04-07 1921
vue canvas 绘制多个多边形，并且可以根据坐标数据回显
canvas绘制多边形
08-31
本文将深入讲解如何使用`canvas`来绘制多边形，通过示例代码详细解析绘制过程。 首先，我们需要在HTML页面中创建一个`canvas`元素，指定其宽度和高度，以便为绘图提供足够的空间： ```html <canvas id="myCanvas" ...
Vue使用Canvas绘制图片、矩形、线条、文字，下载图片
10-17
在本篇文档中，介绍了如何在Vue项目中利用Canvas来绘制图片、矩形、线条以及文字，并提供了将Canvas中的内容导出为图片文件的方法。以下将详细介绍这些知识点。 ### Vue使用Canvas绘制图片 在Vue中使用Canvas绘制...
vue之canvas元素拖动及改变形状
01-02
vue之canvas元素拖动及改变形状 vue之canvas元素拖动及改变形状
canvas绘图任意矩形、多边形
10-19
本教程将深入探讨如何利用Canvas API实现鼠标拖动绘制任意矩形和多边形的功能。 首先，我们需要在HTML文件中创建一个`<canvas>`元素，并设置其id以便于在JavaScript中引用。例如： ```html <!DOCTYPE html> ...
vue 画布 vue-fabric-drawing
02-20
Vue.js 是一个流行的前端框架，它简化了构建用户界面的过程，而 Fabric.js 是一个强大的 JavaScript HTML5 Canvas 库，提供丰富的对象模型和交互性。 在 Vue 项目中集成 Vue Fabric Drawing，可以创建一个可定制的...
自定义控件实现多边形绘制 图形菜单 绘制五边形，六边形等
07-08
自定义控件，实现 多边形 图形 菜单，，五边形，六边形等
vue+canvas绘制图形
01-09
文件中有封装好的绘制圆形、矩形以及不规则图形的方法，直接拿到适合自己的场合下用即可
vue-annotator-使用任何SVG元素（矩形，多边形等，甚至是HTML元素（例如，如果包裹在foreignObject中包裹的画布）），都可以对页面进行注释-Vue.js开发
05-27
vue-annotator使用SVG和HTML元素创建注释。 用法有关完整示例，请参见src / stories / * / *。vue
vue canvas 区域绘制有绘制多边形，包括拖拽、重置、撤销、判断线段重合、判断点是否在多边形内
qq_30687739的博客
12-01 2959
先上效果图（gif 图， 应该是可以看到的吧）对了，解释一下，我这个里面多排序的部分，是因为划线你肯定要有顺序，因为我从接口拿到的顺序是打乱的，所以我按照升序 整理了一下。现在绘制的下面之所以是白色的，是因为录gif的时候 我监控没打开，所以监控没显示出来，用图片也是可以的。我是一个白菜，里面还是有部分搞不太懂，建议可以看一下参考文献第一个链接，问问大佬，然后我就直接上代码了，我写了大量的注释，要是看不懂的，我再解释。
【Vue3+ts+OL+Plot】地图绘制多边形、还原多边形等
Emma_Hui的博客
07-04 2244
整理一下vue3+ts+openlayer+plot实现多边形绘制的功能代码
关于canvas画布上绘制多个（单个也一样）不规则多边形，用户点击这张画布时，判断点击的是哪个多边形
qq_42023279的博客
07-30 1527
首先来看看canvas效果图 上面是我在canvas上绘制了多个不规则多边形，如果不是很了解怎么绘制，可以看我上个博客canvas画图 盒子结构 <div class="imgBox" ref="canvas"> <canvas id="myCanvas" width="660px" height="260px" @click="getWorkShop"></canvas> </div> 样式 .imgBox { width: 100%
在图片上根据四个点画多边形
我是天才很好
07-23 1639
from PIL import ImageDraw, Image import matplotlib.pyplot as plt list = [100,10,10,200,150,350,400,300] im = Image.new('RGB',(400,400),'white') draw = ImageDraw.Draw(im) # PIL.ImageDraw.Draw.polygon(xy, fill=None, outline=None) # draw.polygon(((100,10),(
h5 Canvas正多边形绘制
suwu150
03-23 2526
在之前文章中,我们使用线段进行绘制过矩形,使用arc,arcTo绘制过圆弧和圆形,但是Canvas还能够进行绘制其他图形,比如三角形、六边形、八边形等.这篇文章主要就是说明如何绘制多边形. JS 效果如下: 上述代码,我们进行绘制了一组根据时间进行变化的生成的多边形,通过方法drawHorizontalAxis绘制横向坐标轴,方法drawVerticalAxis绘制纵向坐标轴,通过方法getPolygonPoints进行计算获取多边形中所有的点,进行为后面连线时连接点作准备工作,通过createPo
vue用canvas实现图片编辑画矩形箭头多边形撤销
06-09
要实现这个功能，你可以使用 Vue.js 和 canvas 标签来创建一个图片编辑器。以下是一个简单的示例代码，可以用来实现在图片上绘制矩形、箭头和多边形，并支持撤销操作。 ```vue <template> <div> <canvas ref="canvas" @mousedown="startDrawing" @mousemove="draw" @mouseup="endDrawing"></canvas> <button @click="undo">Undo</button> </div> </template> <script> export default { data() { return { canvas: null, ctx: null, isDrawing: false, startX: 0, startY: 0, endX: 0, endY: 0, shapes: [] } }, mounted() { this.canvas = this.$refs.canvas this.ctx = this.canvas.getContext('2d') const img = new Image() img.src = 'your-image-src' img.onload = () => { this.canvas.width = img.width this.canvas.height = img.height this.ctx.drawImage(img, 0, 0) } }, methods: { startDrawing(e) { this.isDrawing = true this.startX = e.clientX - this.canvas.offsetLeft this.startY = e.clientY - this.canvas.offsetTop this.shapes.push({ type: 'start', x: this.startX, y: this.startY }) }, draw(e) { if (!this.isDrawing) return this.endX = e.clientX - this.canvas.offsetLeft this.endY = e.clientY - this.canvas.offsetTop this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height) this.ctx.drawImage(this.$refs.canvas, 0, 0) switch (this.shape) { case 'rectangle': this.ctx.strokeRect(this.startX, this.startY, this.endX - this.startX, this.endY - this.startY) break case 'arrow': // draw arrow break case 'polygon': // draw polygon break } }, endDrawing() { this.isDrawing = false this.shapes.push({ type: this.shape, x: this.startX, y: this.startY, w: this.endX - this.startX, h: this.endY - this.startY }) }, undo() { if (this.shapes.length === 0) return const lastShape = this.shapes.pop() if (lastShape.type === 'start') { this.shapes.pop() return } this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height) this.ctx.drawImage(this.$refs.canvas, 0, 0) this.shapes.forEach(shape => { switch (shape.type) { case 'rectangle': this.ctx.strokeRect(shape.x, shape.y, shape.w, shape.h) break case 'arrow': // draw arrow break case 'polygon': // draw polygon break } }) } } } </script> ``` 这个示例中，我们在 canvas 标签上绑定了三个事件：mousedown、mousemove 和 mouseup。当用户按下鼠标左键时，我们会记录起始坐标，并将其添加到 shapes 数组中。在 mousemove 事件中，我们会实时更新结束坐标，并使用 strokeRect 方法画出一个矩形。在 mouseup 事件中，我们会将当前的形状类型和坐标信息添加到 shapes 数组中。 我们还添加了一个 undo 方法，用于撤销上一步操作。当用户点击撤销按钮时，我们会从 shapes 数组中取出最后一个元素，然后根据其类型和坐标信息重新绘制画布。 你可以根据这个示例，使用 canvas 的 API 来实现箭头、多边形等其他形状，并支持更多的操作和功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值