devbox
Gausst松鼠会
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

HTML5Canvas实现简易画图工具（铅笔，直线，矩形，圆，文本框，橡皮擦等）_html 在canvas鼠标绘制矩形框

作者：Gausst松鼠会 | 2024-02-18 10:42:18

赞

踩

html 在canvas鼠标绘制矩形框

初学Canvas，用canvas做了简单的画图工具体会并熟悉了一下大致的实现方案。开发完也算是基本了解canvas的用法了。

HTML部分:

  1.     <div class="app">
  2.         <div class="menu">
  3.             <div class="toollist">
  4.                 <button class="menu-item" style="width: fit-content;" onclick="clearCanvas()">clear</button>
  5.                 <button class="menu-item" onclick="restoreMouse()">
  6.                     <svg>//图标
  7.                     </svg>
  8.                 </button>
  9.                 <button class="menu-item" onclick="pencilDraw()">
  10.                     <svg>//图标
  11.                     </svg>
  12.                 </button>
  13.                 <button class="menu-item" onclick="lineDraw()">
  14.                     <svg>
  15.                     </svg>
  16.                 </button>
  17.                 <button class="menu-item" onclick="saveCanvas()">
  18.                     <svg>
  19.                     </svg>
  20.                 </button>
  21.                 <button class="menu-item" onclick="useEraser()">
  22.                     <svg>
  23.                     </svg>
  24.                 </button>
  25.                 <button class="menu-item" onclick="RectDraw()">
  26.                     <svg>
  27.                     </svg></button>
  28.                 <button class="menu-item" onclick="circleDraw()">
  29.                     <svg>
  30.                     </svg>
  31.                 </button>
  32.                 <button class="menu-item" onclick="insertText()">A</button>
  33.             </div>
  34.             <div>
  35.                 <input type="color" style="margin-top: 10px;" onchange="handleColorChange(this)">
  36.             </div>
  37.         </div>
  38.         <div style="background-color: #fff; position: relative;" class="canvas-area">
  39.             <canvas id="canvas" width="1000" height="1000"></canvas>
  40.         </div>
  41.         <!-- <input type="text" style="border: 1px dashed #ccc; position:absolute;top:0;left:10%;outline:none"> -->
  42.     </div>

JS部分：

根据选择的画笔工具分别进行处理，实际上直线，圆，矩形的绘画代码除了使用的方法不同外，唯一的小难点可能就是没办法在画布上重复地绘画，此时需要用到两个方法来实现：

  1. ctx.putImageData(convasData, 0, 0, 0, 0, canvas.offsetWidth, canvas.offsetHeight);
  2. ctx.getImageData(convasData, 0, 0, 0, 0, canvas.offsetWidth, canvas.offsetHeight);

 get方法用来保存当前画布的信息，在onmouseup时，保存此次操作后的画布状态。而put方法则在每次落笔清除绘画轨迹后，将之前保存的数据进行还原，从而实现多次重复绘画的效果。

  1.         var canvas = document.getElementById('canvas');
  2.         var ctx = canvas.getContext('2d');
  3.         var drawdown = false;
  4.         var startPointX, startPointY;
  5.         var toolcontrol = {
  6.             pencil: false,
  7.             line: false,
  8.         }
  9.         var convasData = null;
  10.         var drawcolor = "#000";
  11.         var curtool;
  12.         var textvalue;
  13.         function setUsingTool(tool) {
  14.             for (const key in toolcontrol) {
  15.                 toolcontrol[key] = false;
  16.             }
  17.             toolcontrol[tool] = true;
  18.             curtool = tool;
  19.             // curtool=='line'?
  20.             //     ctx=canvas2.getContext('2d'):
  21.             // ctx=canvas.getContext('2d');
  22.         }
  23.         //function clearCanvas() {
  24.         //  ctx.clearRect(0, 0, 1000, 1000)
  25.         //}
  26.         function drawToolHandler(tool) {
  27.             canvas.addEventListener('mousedown', handleMouseDown);
  28.             canvas.addEventListener('mousemove', handleMouseMove);
  29.             canvas.addEventListener('mouseup', handleMouseUp);
  30.         }
  31.  
  32.         var handleMouseDown = (e) => {
  33.             switch (curtool) {
  34.                 case 'pencil':
  35.                     drawdown = true;
  36.                     ctx.beginPath();
  37.                     ctx.moveTo(e.offsetX, e.offsetY);
  38.                     break;
  39.                 case 'line':
  40.                 case 'rect':
  41.                 case 'ring':
  42.                 case 'text':
  43.                     drawdown = true;
  44.                     startPointX = e.offsetX;
  45.                     startPointY = e.offsetY;
  46.                     break;
  47.                 case 'eraser':
  48.                     drawdown = true;
  49.                     break;
  50.                 default: return;
  51.             }
  52.         }
  53.         var handleMouseMove = (e) => {
  54.             switch (curtool) {
  55.                 case 'pencil':
  56.                     if (drawdown) {
  57.                         ctx.lineTo(e.offsetX, e.offsetY)
  58.                         ctx.strokeStyle = drawcolor.toString();
  59.                         ctx.stroke();
  60.                     }
  61.                     break;
  62.                 case 'line':
  63.                     if (drawdown) {
  64.                         ctx.beginPath();
  65.                         ctx.clearRect(0, 0, 1000, 1000);
  66.                         if (convasData != null) {
  67.                             ctx.putImageData(convasData, 0, 0, 0, 0, canvas.offsetWidth, canvas.offsetHeight);
  68.                         }
  69.                         ctx.moveTo(startPointX, startPointY);
  70.                         ctx.lineTo(e.offsetX, e.offsetY);
  71.                         ctx.closePath();
  72.                         ctx.strokeStyle = drawcolor;
  73.                         ctx.stroke();
  74.                     }
  75.                     break;
  76.                 case 'rect':
  77.                     if (drawdown) {
  78.                         ctx.beginPath();
  79.                         ctx.clearRect(0, 0, 1000, 1000);
  80.                         if (convasData != null) {
  81.                             ctx.putImageData(convasData, 0, 0, 0, 0, canvas.offsetWidth, canvas.offsetHeight);
  82.                         }
  83.                         ctx.strokeStyle = drawcolor;
  84.                         ctx.strokeRect(startPointX, startPointY, e.offsetX - startPointX, e.offsetY - startPointY);
  85.                         ctx.closePath();
  86.                     }
  87.                     break;
  88.                 case 'ring':
  89.                     if (drawdown) {
  90.                         ctx.beginPath();
  91.                         ctx.clearRect(0, 0, 1000, 1000);
  92.                         if (convasData != null) {
  93.                             ctx.putImageData(convasData, 0, 0, 0, 0, canvas.offsetWidth, canvas.offsetHeight);
  94.                         }
  95.                         ctx.strokeStyle = drawcolor;
  96.                         ctx.arc(startPointX, startPointY, (e.offsetY - startPointY) / 2, 0, 2 * Math.PI, false);
  97.                         ctx.stroke()
  98.                         ctx.closePath();
  99.                     }
  100.                     break;
  101.                 case 'text':
  102.                     if (drawdown) {
  103.                         ctx.beginPath();
  104.                         ctx.clearRect(0, 0, 1000, 1000);
  105.                         if (convasData != null) {
  106.                             ctx.putImageData(convasData, 0, 0, 0, 0, canvas.offsetWidth, canvas.offsetHeight);
  107.                         }
  108.                         ctx.strokeStyle = '#000';
  109.                         ctx.strokeRect(startPointX, startPointY, e.offsetX - startPointX, e.offsetY - startPointY);
  110.                         ctx.closePath();
  111.                     }
  112.                 case 'eraser':
  113.                     if (drawdown) {
  114.                         ctx.beginPath();
  115.                         ctx.moveTo(startPointX, startPointY);
  116.                         ctx.clearRect(e.offsetX, e.offsetY, 50, 50);
  117.                     }
  118.                     break;
  119.                 default: return;
  120.             }
  121.         }
  122.         var handleMouseUp = (e) => {
  123.             if (curtool == 'text'&&e.offsetX - startPointX>=10&&e.offsetY - startPointY>=10) {
  124.                 // ctx.clearRect(0, 0, 1000, 1000);
  125.                 let input = document.createElement('input');
  126.                 let canvasArea = document.getElementsByClassName('canvas-area')[0];
  127.                 canvasArea.appendChild(input);
  128.                 input.style.position = "absolute";
  129.                 input.style.left = `${startPointX}px`;
  130.                 input.style.top = `${startPointY}px`;
  131.                 input.style.width = `${e.offsetX - startPointX}px`;
  132.                 input.style.height = `${e.offsetY - startPointY}px`;
  133.                 input.style.fontSize =`${parseInt(input.style.height)/2}px`;
  134.                 input.style.border = "2px dashed #ccc";
  135.                 input.style.outline = 'none'
  136.                 input.addEventListener('input',(e)=>{
  137.                     textvalue=e.target.value
  138.                 })
  139.                 input.addEventListener('blur',()=>{
  140.                     ctx.clearRect(0, 0, 1000, 1000);
  141.                     if (convasData != null) {
  142.                             ctx.putImageData(convasData, 0, 0, 0, 0, canvas.offsetWidth, canvas.offsetHeight);
  143.                     }
  144.                     ctx.font=`${parseInt(input.style.height)/2}px sans-serif`;
  145.                     ctx.fillText(textvalue,parseInt(input.style.left)+20,parseInt(input.style.top)+0.6*parseInt(input.style.height));
  146.                     canvasArea.removeChild(input);
  147.                     convasData = ctx.getImageData(0, 0, canvas.offsetWidth, canvas.offsetHeight);
  148.  
  149.                 })
  150.                 
  151.                 drawdown = false;
  152.             } else {
  153.                 convasData = ctx.getImageData(0, 0, canvas.offsetWidth, canvas.offsetHeight);
  154.                 drawdown = false;
  155.             }
  156.  
  157.         }
  158.         function restoreMouse() {
  159.             canvas.removeEventListener('mousedown', handleMouseDown);
  160.             canvas.removeEventListener('mousemove', handleMouseMove);
  161.             canvas.removeEventListener('mouseup', handleMouseUp);
  162.         }
  163.         function pencilDraw() {
  164.             setUsingTool('pencil');
  165.             drawToolHandler('pencil');
  166.         }
  167.         function lineDraw() {
  168.             setUsingTool('line');
  169.             drawToolHandler('line');
  170.         }
  171.         function useEraser() {
  172.             setUsingTool('eraser');
  173.             drawToolHandler('eraser');
  174.         }
  175.         function RectDraw() {
  176.             setUsingTool('rect');
  177.             drawToolHandler('rect');
  178.         }
  179.         function circleDraw() {
  180.             setUsingTool('ring');
  181.             drawToolHandler('ring');
  182.         }
  183.         function insertText() {
  184.             setUsingTool('text');
  185.             drawToolHandler('text');
  186.         }
  187.         function handleColorChange(e) {
  188.             console.log(e.value);
  189.             drawcolor = e.value
  190.         }
  191.  
  192.         function saveCanvas() {
  193.             var a = document.createElement("a");
  194.             a.href = canvas.toDataURL();
  195.             var fileName = prompt("命名你的图画");
  196.             a.download = fileName || "canvaspic"
  197.             a.click();
  198.         }

其中插入文本相对特殊一些，需要先在页面根据鼠标移动画出一个矩形，鼠标松开时，创建一个矩形大小的input，输入文字且失去焦点后，将input输入的值画在canvas上。

效果：

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/107368
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号