JS canvas实现画板和签字板功能

本文实例为大家分享了JS canvas实现画板/签字板功能的具体代码，供大家参考，具体内容如下

前言

常见的电子教室里的电子黑板。

本文特点：

原生JS
封装好的模块

最简代码样例

!DOCTYPE htML>
    html lang="en">
    head>
     meta charset="UTF-8">
     meta http-equiv="X-UA-Compatible" content="IE=Edge">
     meta name="viewport" content="width=device-width, inITial-scale=1.0">
     title>
    Document/title>
    /head>
    body>
     canvas id="canvas">
    /canvas>
     script>
     let c = document.getElementById('canvas');
     c.width = window.innerWidth;
     c.height = window.innerHeight;
     let ctx = c.getContext('2d');
     // draw one black board ctx.fillStyle = "black";
     ctx.fillRect(0,0,600,300);
     // 按下标记 let onoff = false,  oldx = -10,  oldy = -10;
     // 设置颜色 let linecolor = "white";
     // 设置线宽 let linw = 4;
     // 添加鼠标事件 // 按下 c.addEventListener('mousedown', event =>
 {
      onoff = true;
      // 位置 - 10是为了矫正位置，把绘图放在鼠标指针的顶端  oldx = event.pageX - 10;
      oldy = event.pageY - 10;
 }
    ,false);
     // 移动 c.addEventListener('mouSEMove', event =>
 {
  if(onoff == true){
      let newx = event.pageX - 10,   newy = event.pageY - 10;
      // 绘图  ctx.beginPath();
      ctx.moveTo(oldx,oldy);
      ctx.lineto(newx,newy);
      ctx.strokeStyle = linecolor;
      ctx.lineWidth = linw;
      ctx.lineCap = "round";
      ctx.stroke();
      // 每次移动都要更新坐标位置  oldx = newx,  oldy = newy;
  }
 }
    , true);
     // 弹起 c.addEventListener('mouseup', ()=>
 {
      onoff = false;
 }
    ,false);
     /script>
    /body>
    /html>
    

结果展示

代码讲解

思路

1、鼠标按下，开始描画。鼠标按下事件。
2、鼠标弹起，结束描画。鼠标弹起事件。
3、鼠标按下移动，路径画线。鼠标移动事件。

代码讲解

整体思路：按下鼠标，触发移动的开关，移动后开始记录线条（用移动后的坐标-移动前的坐标，然后绘线），每次移动都会更新旧坐标。松开鼠标后，释放移动开关。

1、只有在鼠标按下，才会触发移动绘图的效果，所以需要增加一个状态判断。
2、因为鼠标指针和实际位置有一个偏移量，所以在坐标定位的时候，需要增加pagex-10从而使坐标位于指针的尖端处。
3、每次移动都要更新坐标位置，用小段的线段来模拟不规则的线。

封装模块

canvas id="canvas">
    /canvas>
    script>
 class Board{
 constructor(canvasName = 'canvas', data = new Map([  ["onoff", false],  ["oldx", -10],  ["oldy", -10],  ["fillStyle", "black"],  ["lineColor", "white"],  ["lineWidth", 4],  ["lineCap", "round"],  ["canvasWidth", window.innerWidth],  ["canvasHeight", window.innerHeight] ])){
      // this.data = data;
      this.c = document.getElementById(canvasName);
      this.ctx = this.c.getContext('2d');
      this.onoff = data.get("onoff");
      this.oldx = data.get("oldx");
      this.oldy = data.get("oldy");
      this.lineColor = data.get("lineColor");
      this.lineWidth = data.get("lineWidth");
      this.lineCap = data.get("lineCap");
      this.c.width = data.get("canvasWidth");
      this.c.height = data.get("canvasHeight");
      this.ctx.fillStyle = data.get("fillStyle");
      this.ctx.fillRect(0,0,600,300);
 }
 eventoperation(){
      // 添加鼠标事件  // 按下  this.c.addEventListener('mousedown', event =>
 {
      this.onoff = true;
      // 位置 - 10是为了矫正位置，把绘图放在鼠标指针的顶端  this.oldx = event.pageX - 10;
      this.oldy = event.pageY - 10;
  }
    ,false);
      // 移动  this.c.addEventListener('mousemove', event =>
 {
  if(this.onoff == true){
       let newx = event.pageX - 10,   newy = event.pageY - 10;
       // 绘图   this.ctx.beginPath();
       this.ctx.moveTo(this.oldx,this.oldy);
       this.ctx.lineTo(newx,newy);
       this.ctx.strokeStyle = this.lineColor;
       this.ctx.lineWidth = this.lineWidth;
       this.ctx.lineCap = this.lineCap;
          this.ctx.stroke();
       // 每次移动都要更新坐标位置   this.oldx = newx,   this.oldy = newy;
  }
  }
    , true);
      // 弹起  this.c.addEventListener('mouseup', ()=>
 {
      this.onoff = false;
  }
    ,false);
 }
 }
     let board = new Board();
     board.eventOperation();
    /script>
    

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

• JavaScript canvas实现围绕旋转动画
• JS+canvas画一个圆锥实例代码
• js canvas画布实现高斯模糊效果
• JavaScript canvas动画实现时钟效果
• js+canvas实现画板功能
• JS Canvas接口和动画效果大全
• JS使用canvas绘制旋转风车动画
• JavaScript结合Canvas绘画画运动小球

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！