当前位置: 萬仟网 > IT编程>开发语言>JavaScript > JS canvas实现画板和签字板功能

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

2021年02月23日  | 萬仟网IT编程  | 我要评论
本文实例为大家分享了js canvas实现画板/签字板功能的具体代码,供大家参考,具体内容如下前言常见的电子教室里的电子黑板。本文特点:原生js封装好的模块最简代码样例<!doctype htm

本文实例为大家分享了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>

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

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
Copyright © 2017-2021  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com