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 相关文章推荐
javascript 进度条 实现代码
Jul 30 Javascript
JQuery 弹出框定位实现方法
Dec 02 Javascript
深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点
Jan 15 Javascript
利用jq让你的div居中的好方法分享
Nov 21 Javascript
JS中判断null、undefined与NaN的方法
Mar 24 Javascript
javascript生成大小写字母
Jul 03 Javascript
AngularJS入门教程之路由与多视图详解
Aug 19 Javascript
EasyUI学习之DataGird分页显示数据
Dec 29 Javascript
开发Vue树形组件的示例代码
Dec 21 Javascript
Vue-router 切换组件页面时进入进出动画方法
Sep 01 Javascript
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
Sep 16 Javascript
js中switch语句的学习笔记
Mar 25 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生成随机字符串(3种方法)
2015/09/25 PHP
最准确的php截取字符串长度函数
2015/10/29 PHP
PHP中set error handler函数用法小结
2015/11/11 PHP
使用composer安装使用thinkphp6.0框架问题【视频教程】
2019/10/01 PHP
JavaScript Cookie的读取和写入函数
2009/12/08 Javascript
juqery 学习之三 选择器 子元素与表单
2010/11/25 Javascript
jquery实现每个数字上都带进度条的幻灯片
2013/02/20 Javascript
文件编码导致jquery失效的解决方法
2013/06/26 Javascript
Jquery判断$(&quot;#id&quot;)获取的对象是否存在的方法
2013/09/25 Javascript
js用Date对象的setDate()函数对日期进行加减操作
2014/09/18 Javascript
AngularJS实用开发技巧(推荐)
2016/07/13 Javascript
使用webpack3.0配置webpack-dev-server教程
2018/05/29 Javascript
angularJS实现不同视图同步刷新详解
2018/10/09 Javascript
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
2019/05/27 jQuery
vue-cli3添加模式配置多环境变量的方法
2019/06/05 Javascript
vue+elementui 对话框取消 表单验证重置示例
2019/10/29 Javascript
使用PyCharm配合部署Python的Django框架的配置纪实
2015/11/19 Python
Python使用win32 COM实现Excel的写入与保存功能示例
2018/05/03 Python
python 字典中取值的两种方法小结
2018/08/02 Python
Python函数参数匹配模型通用规则keyword-only参数详解
2019/06/10 Python
Python之指数与E记法的区别详解
2019/11/21 Python
python 截取XML中bndbox的坐标中的图像,另存为jpg的实例
2020/03/10 Python
python中使用input()函数获取用户输入值方式
2020/05/03 Python
使用pyplot.matshow()函数添加绘图标题
2020/06/16 Python
澳大利亚领先的皮肤诊所:Skin Matrix(抗衰老、痤疮专家、药妆护肤)
2018/05/20 全球购物
计算机专业个人求职自荐信
2013/09/21 职场文书
办公室文秘岗位职责
2013/11/15 职场文书
党员思想汇报范文
2013/12/30 职场文书
体育课课后反思
2014/04/24 职场文书
保护环境演讲稿
2014/05/10 职场文书
客户经理竞聘演讲稿
2014/05/15 职场文书
初三语文教学计划
2015/01/22 职场文书
2015年节能降耗工作总结
2015/05/22 职场文书
导游词之江苏同里古镇
2019/11/18 职场文书
python pygame入门教程
2021/06/01 Python
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技