使用 JavaScript 和 HTML5 绘制多个 Canvas 元素

Question

我想绘制 4 个 canvas 个元素。也就是说，我要绘制同一个canvas元素，4次。

使用一个附加到一个 canvas 元素的 id，我能够获取它并成功绘制它。

来自 main.js

    var canvas = document.getElementById('box');
    var ctx = canvas.getContext('2d');
    var radius = 75;
    var endPercent = 99;
    var curPercent = 0;

    ctx.lineWidth = "10";
    ctx.strokeStyle = "green";

    function draw(currentPerc){
        ctx.clearRect(0,0, canvas.width, canvas.height)
        ctx.beginPath();
        ctx.arc('100', '100', radius, 0, curPercent*currentPerc, false);
        ctx.stroke();

        curPercent++
            if(curPercent < endPercent){
                requestAnimationFrame(function(){
                    draw(curPercent/100);
                });
            }
    }
    draw();

来自HomePage.js

 <canvas id="box" width="200" height="200" ></canvas>

在开始弄清楚我将如何绘制这四次时，我尝试了以下方法：

首先在 HomePage.js 中，我添加了 4 个 canvas 元素，其中的 class 名称具有相同的 id 名称。

来自HomePage.js

<canvas class="box" width="200" height="200" ></canvas>
<canvas class="box" width="200" height="200" ></canvas>
<canvas class="box" width="200" height="200" ></canvas>
<canvas class="box" width="200" height="200" ></canvas>

然后在 javascript 我尝试了以下操作：

来自Main.js

 var canvasCollect = document.querySelectorAll('canvas.box');
 canvasCollect.forEach(draw());

var ctx = canvas.getContext('2d');
var radius = 75;
var endPercent = 99;
var curPercent = 0;

ctx.lineWidth = "10";
ctx.strokeStyle = "green";

function draw(currentPerc){
    ctx.clearRect(0,0, canvas.width, canvas.height)
    ctx.beginPath();
    ctx.arc('100', '100', radius, 0, curPercent*currentPerc, false);
    ctx.stroke();

    curPercent++
        if(curPercent < endPercent){
            requestAnimationFrame(function(){
                draw(curPercent/100);
            });
        }
}

这是行不通的。没有渲染。

Answer 1

HTMLCanvasElement 的每个实例都有自己的 2D 渲染上下文。如果我们看一下您的 draw() 函数，我们可以看到以下几行：

ctx.clearRect(0,0, canvas.width, canvas.height)
ctx.beginPath();
ctx.arc('100', '100', radius, 0, curPercent*currentPerc, false);
ctx.stroke();

ctx 是一个变量，指向您的 <canvas> 元素的 CanvasRenderingContext2D，id 为“box”。

事实上，draw() 函数只会绘制到这个 canvas。要使其绘制到 class box 的任何 canvas，您需要解决每个人自己的 2D 渲染上下文。

这是一个例子：

var canvasCollect = document.querySelectorAll('canvas.box');

var radius = 75;
var endPercent = 100;
var curPercent = 0;

function draw() {
  var ctx;
  canvasCollect.forEach(canvas => {
    ctx = canvas.getContext('2d');
    ctx.lineWidth = "10";
    ctx.strokeStyle = "green";
    ctx.clearRect(0, 0, canvas.width, canvas.height)
    ctx.beginPath();
    ctx.arc('100', '100', radius, 0, 2 * Math.PI * curPercent / 100, false);
    ctx.stroke();
    ctx.closePath();
  });

  curPercent++;
  if (curPercent <= endPercent) {
    requestAnimationFrame(function() {
      draw(curPercent);
    });
  }
}

draw(curPercent);

<canvas class="box" width="200" height="200"></canvas>
<canvas class="box" width="200" height="200"></canvas>
<canvas class="box" width="200" height="200"></canvas>
<canvas class="box" width="200" height="200"></canvas>

使用 JavaScript 和 HTML5 绘制多个 Canvas 元素

Drawing Multiple Canvas Elements Using JavaScript and HTML5

javascript

html5-canvas