canvas 绘制多个方框【基于vue】

最新推荐文章于 2025-04-29 15:23:14 发布

原创

最新推荐文章于 2025-04-29 15:23:14 发布 · 1.4k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html5

1.dom

 <canvas 
 	width="640" 
 	height="480" 
 	id="paint_canvas"
 	ref="paint_canvas"
 	@mousedown.left="leftMouseClick($event)"
 	@mousemove="mouseMovePaint($event)"
 	@mouseup="mouseUpPaint($event)"
 	></canvas>

2.methods

 /**
  * 监听鼠标按键 获取起始位置
  * @param e 元素
  */
  leftMouseClick(e) {
   
   
   this.beginPiant = true;
   if (e.offsetX || e.layerX) {
   
   
    let x = e.offsetX === undefined ? e.layerX : e.offsetX;
    let y = e.offsetY === undefined ? e.layerY : e.offsetY;
    this.startPaint = [x, y];
    }
  },
  /**
   * 监听鼠标移动 获取移动位置
   * @param e 元素
   */
  mouseMovePaint(e) {
   
   
      if (e.offsetX