文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

怎么在JavaScript中使用canvas实现一个画板和签字板功能

2023-06-06 12:30

关注

怎么在JavaScript中使用canvas实现一个画板和签字板功能?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

<!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>

结果展示

怎么在JavaScript中使用canvas实现一个画板和签字板功能

代码讲解

思路

鼠标按下,开始描画。鼠标按下事件。
2、鼠标弹起,结束描画。鼠标弹起事件。
3、鼠标按下移动,路径画线。鼠标移动事件。

代码讲解

整体思路:按下鼠标,触发移动的开关,移动后开始记录线条(用移动后的坐标-移动前的坐标,然后绘线),每次移动都会更新旧坐标。松开鼠标后,释放移动开关。

只有在鼠标按下,才会触发移动绘图的效果,所以需要增加一个状态判断。
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中使用canvas实现一个画板和签字板功能问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注编程网行业资讯频道了解更多相关知识。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯