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

Posted 2023-03-25

【中文标题】如何在两个以上的画布中绘制 HTML 和 JS

【英文标题】：How to draw in more than two canvases HTML & JS

【发布时间】：2021-05-27 23:36:29

【问题描述】：

我正在做一个项目，我需要在将近 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();
   ;

【问题讨论】：

假设您通过 id 请求第二个画布？ document.getElementById("pizarra-postural");也许发布无效的代码？

【参考方案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 元素的初始化、配置和事件处理程序，但这远远超出了这个问题的范围。

【讨论】：

谢谢罗里，我尝试使用你的代码，它工作正常。如果你有时间我需要再问你一个问题...我需要使用一个按钮来清除特定画布的绘制，我使用以下代码：ctx.clearRect(0, 0, canvas.width, canvas.height );但这清除了所有画布。你能帮助我吗？再次感谢！

当然，您可以从绑定到与您要清除的canvas 相关的按钮的事件处理程序调用该行代码。我用一个例子为你更新了答案

Rory，还有一个问题.. 我正在尝试使用 html2canvas 进行保存，我的“程序”工作正常，但这仅在我在函数中只有 1 个画布时才有效。当我有 2 个或更多画布时，程序会保存一张“全黑”照片。

我猜你需要一个循环来遍历所有画布元素，而不仅仅是第一个元素。如果你还没有的话，我建议你开始一个新的问题:)

嘿，罗里！再次感谢...我昨天不得不问：这是那个链接：***.com/questions/66379753/…