Question

我一直很难添加透明的画布按钮。我正在尝试构建一个简单的画布，用户可以在其中绘制和下载他们制作的图像。我对javascript不太了解（坦白地说，也不是html和css），并且已经研究过类似的问题并尝试了不同的解决方案，但似乎无法使其正常工作？有人可以帮忙吗？

Thank you so much in advance
Beatriz

    
        canvas {
            cursor: url(cursor.png), crosshair;
            border-top: 2px solid #000000;
            width: 100vw;
            height: 100vh;
          background-image: url(posters_v3.png);
          background-size: contain;
          margin: 0 0 85px 0;
        }
    
        input.button  {
    
        position:absolute;
    
        }

    
        <section class="canvas">
           
        <canvas id="canvas" style="position:absolute;border-top:2px solid;"></canvas>
            
            <div>
           <input type="button" id="clear" value="Clear">
            </div>
            
          
         <script>
            const canvas = document.querySelector('#canvas');
          // could be 3d
const ctx = canvas.getContext('2d');
          canvas.width = window.innerWidth;
          canvas.height = window.innerHeight;
    
          ctx.lineJoin = 'round';
          ctx.lineCap = 'round';
          ctx.lineWidth = 10;
          ctx.strokeStyle = '#000000';
    
          let isDrawing = false;
          let lastX = 0;
          let lastY = 0;
    
          function draw(e) {
            // stop the function if they are not mouse down
            if(!isDrawing) return;
            //listen for mouse move event
            console.log(e);
            ctx.beginPath();
            ctx.moveTo(lastX, lastY);
            ctx.lineTo(e.offsetX, e.offsetY);
            ctx.stroke();
            [lastX, lastY] = [e.offsetX, e.offsetY];
          }
    
          canvas.addEventListener('mousedown', (e) => {
            isDrawing = true;
            [lastX, lastY] = [e.offsetX, e.offsetY];
          });
    
          canvas.addEventListener('mousemove', draw);
          canvas.addEventListener('mouseup', () => isDrawing = false);
          canvas.addEventListener('mouseout', () => isDrawing = false);
           



             </script>

Answer 1

您需要添加其他事件侦听器，并使用方法ctx.clearRect（）;。透明矩形应与您的画布一样大。

也许您无法执行此操作，因为您的按钮位于画布下方，因此无法单击。

const canvas = document.querySelector('#canvas');
          // could be 3d
const ctx = canvas.getContext('2d');
          canvas.width = window.innerWidth;
          canvas.height = window.innerHeight;
    
          ctx.lineJoin = 'round';
          ctx.lineCap = 'round';
          ctx.lineWidth = 10;
          ctx.strokeStyle = '#000000';
    
          let isDrawing = false;
          let lastX = 0;
          let lastY = 0;
    
          function draw(e) {
            // stop the function if they are not mouse down
            if(!isDrawing) return;
            //listen for mouse move event
            //console.log(e);
            ctx.beginPath();
            ctx.moveTo(lastX, lastY);
            ctx.lineTo(e.offsetX, e.offsetY);
            ctx.stroke();
            [lastX, lastY] = [e.offsetX, e.offsetY];
          }
    
          canvas.addEventListener('mousedown', (e) => {
            isDrawing = true;
            [lastX, lastY] = [e.offsetX, e.offsetY];
          });
    
          canvas.addEventListener('mousemove', draw);
          canvas.addEventListener('mouseup', () => isDrawing = false);
          canvas.addEventListener('mouseout', () => isDrawing = false);
           


_clear.addEventListener("click", ()=>{
  ctx.clearRect(0,0,canvas.width,canvas.height)
})

     <section class="canvas">
           
        <canvas id="canvas" style="border:2px solid; "></canvas>
            
            <div>
           <input type="button" id="_clear" value="Clear" style="position:absolute;top:0;left:0">
            </div>
</section>

在画布上添加清除按钮

1 个答案: