JS canvas实现画板和签字板功能_javascript技巧

来源:脚本之家  责任编辑:小易  

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


  • 本文相关:
  • 妙用bootstrap的 popover插件实现校验表单提示功能
  • js实现页面刷新滚动条位置不变
  • js控制不同的时间段显示不同的css样式的实例代码
  • 下拉框select的绑定示例
  • layui实现列表查询功能
  • 用xhtml+css写的相册自适应 - 类似九宫格[兼容 ff ie6 ie7 opea
  • 原生javascript自定义input[type=radio]效果示例
  • 一个用js实现控制台控件的代码
  • 整理关于bootstrap导航的慕课笔记
  • canvas学习之api整理笔记(一)
  • 使用Canvas画布结合JavaScript绘制以下图形,写出...
  • Javascript如何在网页上实现画图功能
  • 怎样用html5 canvas制造页面上的画图板
  • html5 javascript实现canvas里边多图层显示怎么弄
  • 网页画布标签的js算法,下面的图是用画布画的,睡...
  • js+html5实现canvas绘制镂空字体文本的方法
  • 跪求,html,css,js前端怎么实现某个点按照轨迹来画...
  • html5实现canvas画板的插件有哪些
  • javascript onLoad函数中canvas 画板上画不了图片 ...
  • 如何用 canvas 实现一个类似PS的绘图功能
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全基础知识javascript类库表单特效广告代码网页特效黑客性质javascript技巧domnode.jsjs其它首页javascriptjs+canvas实现画板功能js实现canvas简单小画板功能javascript+canvas实现画板功能javascript实现画板功能javascript简易画板开发javascript html5 canvas实现的一个画板js基于ocanvas插件实现的简单画板效果代码(附demo源码下载)html5+javascript制作简易画板附图纯js网页画板(graphics)类简介及实现代码用javascript实现画板的代码妙用bootstrap的 popover插件实现校验表单提示功能js实现页面刷新滚动条位置不变js控制不同的时间段显示不同的css样式的实例代码下拉框select的绑定示例layui实现列表查询功能用xhtml+css写的相册自适应 - 类似九宫格[兼容 ff ie6 ie7 opea原生javascript自定义input[type=radio]效果示例一个用js实现控制台控件的代码整理关于bootstrap导航的慕课笔记canvas学习之api整理笔记(一)js刷新页面方法大全js删除数组里的某个元素方法js中settimeout()的用法详解js截取字符串常用方法详细整理js页面跳转常用的几种方式js打开新窗口的2种方式js数组与字符串的相互转换方法js设置cookie、读取cookie、删除js 将json字符串转换为json对象的js保留两位小数方法总结javascript动画效果打开/关闭层javascript使用avalon绑定实现checkbox全bootstrap安装环境配置教程分享js中的回调函数实例浅析js程序中美元符号$是什么js中多层次排序算法的实现代码react注册倒计时功能的实现javascript游戏开发之《三国志曹操传》零js+css简单树形菜单实现方法详解javascript数组和字符串中去除重复值
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved