Canvas 画布

//div

  <canvas id="theCanvas" width="800" height="400"></canvas>

//mounted

mounted(){

  cavs() {
      let theCanvas = document.querySelector("#theCanvas");

      if (!theCanvas || !theCanvas.getContext) {
        return false;
      } else {
        let context = theCanvas.getContext("2d");
        const windowToCanvas = (canvas, x, y) => {
          //获取canvas元素距离窗口的一些属性，MDN上有解释
          let rect = canvas.getBoundingClientRect();

          //x和y参数分别传入的是鼠标距离窗口的坐标，然后减去canvas距离窗口左边和顶部的距离。

          return {
            x: x - rect.left * (canvas.width / rect.width),

            y: y - rect.top * (canvas.height / rect.height),
          };
        };
        theCanvas.onmousedown = function (e) {
          //获得鼠标按下的点相对canvas的坐标。
          let ele = windowToCanvas(theCanvas, e.clientX, e.clientY);

          //es6的解构赋值
          let { x, y } = ele;

          //绘制起点。
          context.moveTo(x, y);
        };

        theCanvas.onmousedown = function (e) {
          //获得鼠标按下的点相对canvas的坐标。
          let ele = windowToCanvas(theCanvas, e.clientX, e.clientY);

          //es6的解构赋值
          let { x, y } = ele;

          //绘制起点。
          context.moveTo(x, y);

          //鼠标移动事件

          theCanvas.onmousemove = (e) => {
            //移动时获取新的坐标位置，用lineTo记录当前的坐标，然后stroke绘制上一个点到当前点的路径

            let ele = windowToCanvas(theCanvas, e.clientX, e.clientY);
            let { x, y } = ele;
            context.lineTo(x, y);
            context.stroke();
          };
          
          //这种方法是直线
          // theCanvas.onmouseup = (e) => {//   let ele = windowToCanvas(theCanvas, e.clientX, e.clientY);
          //   let { x, y } = ele;
          //   context.lineTo(x, y);
          //   context.stroke();
          // };
        };
      }
    },
   }

//css 
#theCanvas {
  width: 800px;
  height: 400px;
  border: 2px solid red;
}

 

效果：

 

参考事件：

鼠标事件类型

事件类型	说明
click	单击鼠标左键时发生，如果右键也按下则不会发生。当用户的焦点在按钮上并按了 Enter 键时，同样会触发这个事件
dblclick	双击鼠标左键时发生，如果右键也按下则不会发生
mousedown	鼠标按钮被按下时发生
mouseout	鼠标指针位于某个元素上且将要移出元素的边界时发生
mouseover	鼠标指针移出某个元素到另一个元素上时发生
mouseup	鼠标按键被松开时发生
mousemove	鼠标在某个元素上时持续发生
mouseleave	当鼠标指针移出元素时触发
mouseenter	当鼠标指针移动到元素上时触发。
contextmenu	在用户点击鼠标右键打开上下文菜单时触发