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


Posted in Javascript onFebruary 23, 2021

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

结果展示

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

代码讲解

思路

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 相关文章推荐
详解JS中Array对象扩展与String对象扩展
Jan 07 Javascript
AngularJS基础 ng-readonly 指令简单示例
Aug 02 Javascript
JavaScript鼠标特效大全
Sep 13 Javascript
bootstrap模态框垂直居中效果
Dec 03 Javascript
canvas知识总结
Jan 25 Javascript
jquery表单提交带错误信息提示效果
Mar 09 Javascript
WebStorm ES6 语法支持设置&amp;babel使用及自动编译(详解)
Sep 08 Javascript
手动用webpack搭建第一个ReactApp的示例
Apr 11 Javascript
微信小程序通过js实现瀑布流布局详解
Aug 28 Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
Sep 05 Javascript
JavaScript获取当前url路径过程解析
Dec 27 Javascript
JavaScript编码小技巧分享
Sep 17 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 #Vue.js
js实现验证码干扰(动态)
Feb 23 #Javascript
js实现验证码干扰(静态)
Feb 22 #Javascript
JavaScript实现H5接金币功能(实例代码)
Feb 22 #Javascript
nestjs返回给前端数据格式的封装实现
Feb 22 #Javascript
NestJs使用Mongoose对MongoDB操作的方法
Feb 22 #Javascript
linux服务器快速卸载安装node环境(简单上手)
Feb 22 #Javascript
You might like
asp.net和php的区别点总结
2019/10/10 PHP
JS 面向对象之神奇的prototype
2011/02/26 Javascript
js Math 对象的方法
2013/09/01 Javascript
javascript从右边截取指定字符串的三种实现方法
2013/11/29 Javascript
javascript中的五种基本数据类型
2015/08/26 Javascript
javascript计时器编写过程与实现方法
2016/02/29 Javascript
Vue.js中数据绑定的语法教程
2017/06/02 Javascript
Vue2.0 从零开始_环境搭建操作步骤
2017/06/14 Javascript
[js高手之路]图解javascript的原型(prototype)对象,原型链实例
2017/08/28 Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
2018/09/12 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
2019/03/07 jQuery
Node.js实现简单的爬取的示例代码
2019/06/25 Javascript
vue项目中使用bpmn为节点添加颜色的方法
2020/04/30 Javascript
JavaScript实时更新当前的时间的示例代码
2020/07/15 Javascript
vue 子组件修改data或调用操作
2020/08/07 Javascript
[00:35]TI7不朽珍藏III——寒冰飞龙不朽展示
2017/07/15 DOTA
python统计字符串中指定字符出现次数的方法
2015/04/04 Python
python爬取网页转换为PDF文件
2018/06/07 Python
python和pygame实现简单俄罗斯方块游戏
2021/02/19 Python
Python实现的列表排序、反转操作示例
2019/03/13 Python
利用python-pypcap抓取带VLAN标签的数据包方法
2019/07/23 Python
Python学习笔记之For循环用法详解
2019/08/14 Python
python中sort和sorted排序的实例方法
2019/08/26 Python
Tensorflow 卷积的梯度反向传播过程
2020/02/10 Python
Keras中的两种模型:Sequential和Model用法
2020/06/27 Python
keras在构建LSTM模型时对变长序列的处理操作
2020/06/29 Python
Pycharm中如何关掉python console
2020/10/27 Python
纯CSS3实现圆角效果(含IE兼容解决方法)
2014/05/07 HTML / CSS
div或img图片高度随宽度自适应的方法
2020/02/06 HTML / CSS
AmazeUI 图标的示例代码
2020/08/13 HTML / CSS
amazeui树节点自动展开折叠面板并选中第一个树节点的实现
2020/08/24 HTML / CSS
Nice Kicks网上商店:ShopNiceKicks.com
2018/12/25 全球购物
Farfetch台湾官网:奢侈品牌时尚购物平台
2019/06/17 全球购物
2014年预备党员学习两会心得体会
2014/03/17 职场文书
小学教师师德承诺书
2014/05/23 职场文书
python中取整数的几种方法
2021/11/07 Python