首页-教程-Web前端

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

 4159

这篇文章主要为大家详细介绍了JS canvas实现画板和签字板功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

前言

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

本文特点：

原生JS
封装好的模块

最简代码样例

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10. <canvas id="canvas"></canvas>
  11. <script>
  12.     let c = document.getElementById('canvas');
  13.     c.width = window.innerWidth;
  14.     c.height = window.innerHeight;
  15.     let ctx = c.getContext('2d');
  16.     // draw one black board
  17.     ctx.fillStyle = "black";
  18.     ctx.fillRect(0,0,600,300);
  19.     // 按下标记
  20.     let onoff = false,
  21.         oldx = -10,
  22.         oldy = -10;
  23.     // 设置颜色
  24.     let linecolor = "white";
  25.     // 设置线宽
  26.     let linw = 4;
  27.     // 添加鼠标事件
  28.     // 按下
  29.     c.addEventListener('mousedown', event => {
  30.         onoff = true;
  31.         // 位置 - 10是为了矫正位置，把绘图放在鼠标指针的顶端
  32.         oldx = event.pageX - 10;
  33.         oldy = event.pageY - 10;
  34.     },false);
  35.     // 移动
  36.     c.addEventListener('mousemove', event => {
  37.         if(onoff == true){
  38.         let newx = event.pageX - 10,
  39.             newy = event.pageY - 10;
  40.         // 绘图
  41.         ctx.beginPath();
  42.         ctx.moveTo(oldx,oldy);
  43.         ctx.lineTo(newx,newy);
  44.         ctx.strokeStyle = linecolor;
  45.         ctx.lineWidth = linw;
  46.         ctx.lineCap = "round";
  47.         ctx.stroke();
  48.         // 每次移动都要更新坐标位置
  49.         oldx = newx,
  50.         oldy = newy;
  51.         }
  52.     }, true);
  53.     // 弹起
  54.     c.addEventListener('mouseup', ()=> {
  55.         onoff = false;
  56.     },false);
  57. </script>
  58. </body>
  59. </html>

结果展示


6035df413c697.png


代码讲解

思路

1、鼠标按下，开始描画。鼠标按下事件。

2、鼠标弹起，结束描画。鼠标弹起事件。

3、鼠标按下移动，路径画线。鼠标移动事件。

代码讲解

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

1、只有在鼠标按下，才会触发移动绘图的效果，所以需要增加一个状态判断。

2、因为鼠标指针和实际位置有一个偏移量，所以在坐标定位的时候，需要增加pagex-10从而使坐标位于指针的尖端处。

3、每次移动都要更新坐标位置，用小段的线段来模拟不规则的线。

封装模块

  1. <canvas id="canvas"></canvas>
  2. <script>
  3. class Board{
  4.     constructor(canvasName = 'canvas', data = new Map([
  5.         ["onoff", false],
  6.         ["oldx", -10],
  7.         ["oldy", -10],
  8.         ["fillStyle", "black"],
  9.         ["lineColor", "white"],
  10.         ["lineWidth", 4],
  11.         ["lineCap", "round"],
  12.         ["canvasWidth", window.innerWidth],
  13.         ["canvasHeight", window.innerHeight]
  14.     ])){
  15.         // this.data = data;
  16.         this.c = document.getElementById(canvasName);
  17.         this.ctx = this.c.getContext('2d');
  18.         this.onoff = data.get("onoff");
  19.         this.oldx = data.get("oldx");
  20.         this.oldy = data.get("oldy");
  21.         this.lineColor = data.get("lineColor");
  22.         this.lineWidth = data.get("lineWidth");
  23.         this.lineCap = data.get("lineCap");
  24.         this.c.width = data.get("canvasWidth");
  25.         this.c.height = data.get("canvasHeight");
  26.         this.ctx.fillStyle = data.get("fillStyle");
  27.         this.ctx.fillRect(0,0,600,300);
  28.     }
  29.     eventOperation(){
  30.         // 添加鼠标事件
  31.         // 按下
  32.         this.c.addEventListener('mousedown', event => {
  33.             this.onoff = true;
  34.             // 位置 - 10是为了矫正位置，把绘图放在鼠标指针的顶端
  35.             this.oldx = event.pageX - 10;
  36.             this.oldy = event.pageY - 10;
  37.         },false);
  38.         // 移动
  39.         this.c.addEventListener('mousemove', event => {
  40.             if(this.onoff == true){
  41.                 let newx = event.pageX - 10,
  42.                 newy = event.pageY - 10;
  43.                 // 绘图
  44.                 this.ctx.beginPath();
  45.                 this.ctx.moveTo(this.oldx,this.oldy);
  46.                 this.ctx.lineTo(newx,newy);
  47.                 this.ctx.strokeStyle = this.lineColor;
  48.                 this.ctx.lineWidth = this.lineWidth;
  49.                 this.ctx.lineCap = this.lineCap;
  50.            
  51.                 this.ctx.stroke();
  52.                 // 每次移动都要更新坐标位置
  53.                 this.oldx = newx,
  54.                 this.oldy = newy;
  55.             }
  56.         }, true);
  57.         // 弹起
  58.         this.c.addEventListener('mouseup', ()=> {
  59.             this.onoff = false;
  60.         },false);
  61.     }
  62. }
  63. let board = new Board();
  64. board.eventOperation();
  65. </script>


TAG标签：
本文网址：https://www.zztuku.com/detail-8681.html
站长图库 - JS canvas实现画板和签字板功能
申明：如有侵犯，请 联系我们 删除。

评论（0）条

您还没有登录，请 登录 后发表评论！

提示：请勿发布广告垃圾评论，否则封号处理！！

    编辑推荐