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 相关文章推荐
[原创]网络复制内容时常用的正则+editplus
Nov 30 Javascript
javascript中的toFixed固定小数位数 简单实例分享
Jul 12 Javascript
比较常见的javascript中定义函数的区别
Nov 09 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
Aug 10 Javascript
JavaScript实现鼠标点击导航栏变色特效
Feb 08 Javascript
Vue学习笔记进阶篇之函数化组件解析
Jul 21 Javascript
three.js实现3D影院的原理的代码分析
Dec 18 Javascript
微信小程序 JS动态修改样式的实现方法
Dec 16 Javascript
js实现一款简单踩白块小游戏(曾经很火)
Dec 02 Javascript
Vue-axios-post数据后端接不到问题解决
Jan 09 Javascript
原生微信小程序开发中 redux 的使用详解
Feb 18 Javascript
JavaScript实现班级抽签小程序
May 19 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
PHP通过session id 实现session共享和登录验证的代码
2012/06/03 PHP
CI操作cookie的方法分析(基于helper类库)
2016/03/28 PHP
thinkphp,onethink和thinkox中验证码不显示的解决方法分析
2016/06/06 PHP
Yii框架模拟组件调用注入示例
2019/11/11 PHP
Javascript面向对象编程(二) 构造函数的继承
2011/08/28 Javascript
什么是json和jsonp,jQuery json实例详详细说明
2012/12/11 Javascript
jQuery回调函数的定义及用法实例
2014/12/23 Javascript
JavaScript中的操作符==与===介绍
2014/12/31 Javascript
简介JavaScript中的italics()方法的使用
2015/06/08 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
2016/05/19 Javascript
jquery+ajax+text文本框实现智能提示完整实例
2016/07/09 Javascript
jQuery+CSS实现简单切换菜单示例
2016/07/27 Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
2016/08/09 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
2016/08/09 Javascript
jQuery使用Layer弹出层插件闪退问题
2016/12/22 Javascript
关于vue-router路径计算问题
2017/05/10 Javascript
浅谈JavaScript find 方法不支持IE的问题
2017/09/28 Javascript
vue使用rem实现 移动端屏幕适配
2018/09/26 Javascript
python获取指定网页上所有超链接的方法
2015/04/04 Python
用Python解析XML的几种常见方法的介绍
2015/04/09 Python
对Python Pexpect 模块的使用说明详解
2019/02/14 Python
python2和python3在处理字符串上的区别详解
2019/05/29 Python
django用户登录验证的完整示例代码
2019/07/21 Python
python如何从键盘获取输入实例
2020/06/18 Python
老生常谈CSS中的长度单位
2016/06/27 HTML / CSS
台湾森森购物网:U-mall
2017/10/16 全球购物
澳大利亚领先的在线葡萄酒零售商:Get Wines Direct
2018/03/27 全球购物
如何利用find命令查找文件
2016/11/18 面试题
linux比较文件内容的命令是什么
2013/03/04 面试题
医院护士的求职信
2014/01/03 职场文书
高二英语教学反思
2014/01/19 职场文书
2014年教师业务学习材料
2014/05/12 职场文书
2014大学校园光棍节活动策划书
2014/09/29 职场文书
三方股东合作协议书
2014/10/28 职场文书
2014年世界艾滋病日演讲稿
2014/11/28 职场文书
2015年全民国防教育日活动总结
2015/03/23 职场文书