如何在背景画布上绘画答案

【问题标题】：How to paint on background canvas如何在背景画布上绘画
【发布时间】：2020-10-10 19:44:33
【问题描述】：

因此，当画布位于背景中时，显然，我无法在 z-index 中位于画布上方的元素上绘制。

 var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
        var width  = window.innerWidth;
        var height = window.innerHeight;
        canvas.height = height;
        canvas.width = width;

let hue = 0;
let isDrawing = false;
let lastX = 0;
let lastY = 0;
let direction = true;

            var colorsArray = [
                "#5e9bd1",
                "#f4e78f",
                "#a4e38e",
                "#f1c39e",
                "#cbb7dd",
                "#cacaca"
            ];
            var randomNumber = Math.floor(Math.random()*colorsArray.length);
            var color = colorsArray[randomNumber]
            var lineWidth = Math.floor(Math.random()*200 + 20);
            ctx.lineWidth = lineWidth;
            ctx.lineCap = ctx.lineJoin = 'round';


        canvas.addEventListener('mouseup', function() {
            this.down = false;          
        }, 0);

        canvas.addEventListener('mousemove', function(e) {
                      this.down = true;   
            if(this.down) {
                 with(ctx) {
                                     ctx.strokeStyle = color;

                    beginPath();
                    moveTo(this.X, this.Y);
                    lineTo(e.pageX , e.pageY );
                    stroke();
                 }
                 this.X = e.pageX ;
                 this.Y = e.pageY ;
            }
        }, 0);

#canvas{
  z-index: 1;
  position: absolute;
}

div {
  position: fixed;
  top: 50px;
  left: 50px;
  z-index: 10;
  width: 200px;
  height: 200px;
  border: 1px black;
}
body{
    margin:0;
}

  <body>
  
<div>
<p>
gdsgsdg sd gasd g
gdsag ads
gdsa gsg asd
agsd 
asdg as
</p>
  <a href="test">LINK</a>
</div>
      <canvas id="canvas"  >
      </canvas>

  
</body>

我希望能够在背景定位的画布上绘图，但同时能够使用位于其顶部的任何其他元素，同时绘图保持活动状态。

【问题讨论】：

标签： canvas html5-canvas drawing

【解决方案1】：

您可以将鼠标侦听器添加到document 而不是canvas。比如document.addEventListener('mousemove', mouseEvent);

要获取画布坐标，您可以使用canvas.getBoundingClientRect(); 获取其位置，然后调整事件坐标，使它们相对于画布。不要忘记页面滚动位置。

使用您的片段的示例

document.addEventListener("mouseup", mouseEvent);
document.addEventListener("mousedown", mouseEvent);
document.addEventListener('mousemove', mouseEvent);

const mouse = {x: 0, y: 0, down: "forcedown"};  // starts with mouse down
function mouseEvent(event) {
      const bounds = canvas.getBoundingClientRect();
      const x = event.pageX - bounds.left - scrollX;
      const y = event.pageY - bounds.top  - scrollY;
    if (event.type === "mousedown" || mouse.down === "forcedown") {
        mouse.down = true 
        mouse.x = x;
        mouse.y = y;
    }
    if (event.type === "mouseup") { mouse.down = false }
    if (mouse.down) {    
        ctx.beginPath()
        ctx.lineTo(mouse.x, mouse.y);
        ctx.lineTo(mouse.x = x, mouse.y = y);
        ctx.stroke();
    }
}


const ctx = canvas.getContext('2d');
canvas.height = innerWidth;
canvas.width = innerHeight;
const colorsArray = ["#5e9bd1", "#f4e78f", "#a4e38e", "#f1c39e", "#cbb7dd", "#cacaca"];
ctx.strokeStyle = colorsArray[Math.random() * colorsArray.length | 0];
ctx.lineWidth = Math.random() * 2 + 2;
ctx.lineCap = ctx.lineJoin = 'round';

#canvas {
  z-index: 1;
  position: absolute;
}

div {
  position: fixed;
  top: 50px;
  left: 50px;
  z-index: 10;
  width: 200px;
  height: 200px;
  border: 1px black;
}

body {
  margin: 0;
}

<body>

  <div>
    <p>
      gdsgsdg sd gasd g gdsag ads gdsa gsg asd agsd asdg as
    </p>
    <a href="test">LINK</a>
  </div>
  <canvas id="canvas"> </canvas>


</body>

【讨论】：