如何在两个以上的画布中绘制 HTML 和 JS

Question

我正在做一个项目，我需要在将近 5 个画布上绘制。我已经成功创建了第一个画布，但是当我输入第二个代码时，我只能在这个最新的画布上绘制。

我读到的问题可能是上下文（“2d”）我试图将保存在不同的 ctx 变量中，例如 ctx2 或类似的东西。

这是我的代码：

HTML

   <!--First Canvas-->
    <div class="col-sm-12 col-lg-6 mt-5 d-flex flex-column justify-content-center">
        <div id="contenedor-pizarra-cervical" class="contenedor-pizarra mx-auto">
            <canvas id="pizarra-cervical"></canvas>
        </div>
    </div>

   <!--Second Canvas-->
    <div class="col-sm-12 col-lg-6 mt-5 d-flex flex-column justify-content-center">           
        <div id="contenedor-pizarra-postural" class="contenedor-pizarra mx-auto">
            <canvas id="pizarra-postural"></canvas>
        </div>
    </div>

第一个画布的 JS 工作正常：

   //Canvas Cervical

   var canvasCervical = document.getElementById("pizarra-cervical");
   var ctx = canvasCervical.getContext("2d");
   var painting = document.getElementById("contenedor-pizarra-cervical");
   var paintStyle = getComputedStyle(painting);
   canvasCervical.width = parseInt(paintStyle.getPropertyValue("width"));
   canvasCervical.height = parseInt(paintStyle.getPropertyValue("height"));

   var mouse = {x: 0, y: 0};

   canvasCervical.addEventListener('mousemove', function(e){
    mouse.x = e.pageX - this.offsetLeft;
    mouse.y = e.pageY - this.offsetTop
   }, false);


   ctx.lineWidth = 3;
   ctx.lineJoin = 'round';
   ctx.lineCap = 'round';
   ctx.strokeStyle = '#7baeb0';

   canvasCervical.addEventListener('mousedown', function(e){
    ctx.beginPath();
    ctx.moveTo(mouse.x, mouse.y);
    canvasCervical.addEventListener('mousemove', onPaint, false);
   }, false);

   canvasCervical.addEventListener('mouseup', function(){
    canvasCervical.removeEventListener('mousemove', onPaint, false)
   },false);

   var onPaint = function (){
    ctx.lineTo(mouse.x, mouse.y);
    ctx.stroke();
   };

Answer 1

如果您需要在多个画布上发生相同的行为，那么您可以在其自己的函数中定义配置逻辑，提供 canvas 元素作为参数，如下所示：

let configureCanvas = canvas => {  
  let painting = canvas.parentNode;
  let paintStyle = getComputedStyle(painting);
  let mouse = { x: 0, y: 0 };  
  let onPaint = () => {
    ctx.lineTo(mouse.x, mouse.y);
    ctx.stroke();
  };
  
  canvas.width = parseInt(paintStyle.getPropertyValue("width"));
  canvas.height = parseInt(paintStyle.getPropertyValue("height"));

  let ctx = canvas.getContext("2d");
  ctx.lineWidth = 3;
  ctx.lineJoin = 'round';
  ctx.lineCap = 'round';
  ctx.strokeStyle = '#7baeb0';
  
  canvas.addEventListener('mousemove', function(e) {
    mouse.x = e.pageX - this.offsetLeft;
    mouse.y = e.pageY - this.offsetTop
  }, false);

  canvas.addEventListener('mousedown', function(e) {
    ctx.beginPath();
    ctx.moveTo(mouse.x, mouse.y);
    canvas.addEventListener('mousemove', onPaint, false);
  }, false);

  canvas.addEventListener('mouseup', function() {
    canvas.removeEventListener('mousemove', onPaint, false)
  }, false);
  
  canvas.nextElementSibling.addEventListener('click', function() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
  });
}

configureCanvas(document.getElementById("pizarra-cervical"));
configureCanvas(document.getElementById("pizarra-postural"));

canvas {
  border: 1px solid #CCC;
}

<!--First Canvas-->
<div class="col-sm-12 col-lg-6 mt-5 d-flex flex-column justify-content-center">
  <div id="contenedor-pizarra-cervical" class="contenedor-pizarra mx-auto">
    <canvas id="pizarra-cervical"></canvas>
    <button class="clear">Clear</button>
  </div>
</div>

<!--Second Canvas-->
<div class="col-sm-12 col-lg-6 mt-5 d-flex flex-column justify-content-center">
  <div id="contenedor-pizarra-postural" class="contenedor-pizarra mx-auto">
    <canvas id="pizarra-postural"></canvas>
    <button class="clear">Clear</button>
  </div>
</div>

更进一步，我建议定义您自己的类来处理 canvas 元素的初始化、配置和事件处理程序，但这远远超出了这个问题的范围。