javascript - Javascript：HTML5 Canvas 和带有 getElementById 的 id 循环

Question

我对 Javascript 很陌生，我想在我的 Django 模板中使用带有 javascript 的画布。

我有一个小 html 部分和 javascript 部分，看起来像这样：

{% for document in publication.documents.all %}
<td class="col-md-1">
    <canvas id="the-canvas"></canvas>
</td>
{% endfor %}

<script>
  pdfjsLib.getDocument('http://localhost:8000/media/media/loremipsum2.pdf').then(function (pdf) {
    console.log("pdf loaded");
    pdf.getPage(1).then(function (page) {
        var scale = 0.40;
        var viewport = page.getViewport(scale);

        var canvas = document.getElementById('the-canvas');
        var context = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;

        var renderContext = {
            canvasContext: context,
            viewport: viewport
        };
        page.render(renderContext);
    });
  });
</script>

我正在尝试使用PDF.js它来制作一些东西。在我的 javascript 代码中，我想处理getElementById以循环遍历动态 html 画布 ID。

所以我现在有这个代码：

{% for document in publication.documents.all %}
<td class="col-md-1">
    <canvas id="the-canvas{{document.id}}"></canvas>
</td>
{% endfor %}

<script>
  pdfjsLib.getDocument('http://localhost:8000/media/media/loremipsum2.pdf').then(function (pdf) {
    console.log("pdf loaded");
    pdf.getPage(1).then(function (page) {
        var scale = 0.40;
        var viewport = page.getViewport(scale);

        var canvas = document.getElementById('the-canvas{{document.id}}');
        var context = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;

        var renderContext = {
            canvasContext: context,
            viewport: viewport
        };
        page.render(renderContext);
    });
  });
</script>

第一个代码只显示第一个画布对象（这是正常的）。第二个应该显示每个画布对象，但它不起作用。它什么也不显示。

我在我的 javascript 代码中犯了任何错误吗？

谢谢

编辑 ：

带有循环标记的代码<canvas>：

{% for document in publication.documents.all %}
<td class="col-md-1">
    <canvas id="the-canvas"></canvas>
</td>
{% endfor %}

<script>
  pdfjsLib.getDocument('http://localhost:8000/media/media/loremipsum2.pdf').then(function (pdf) {
    console.log("pdf loaded");
    pdf.getPage(1).then(function (page) {
        var scale = 0.40;
        var viewport = page.getViewport(scale);

        var canvas = document.getElementsByTagName('canvas');
        var context = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;

        var renderContext = {
            canvasContext: context,
            viewport: viewport
        };
        page.render(renderContext);
    });
  });
</script>

标签： javascripthtmlcanvasgetelementbyid

Answer 1

我做对了吗，你想在多个画布上循环吗？由于这个问题没有被标记Django，我不知道“动态变量”的东西是什么：D。但也许该代码块可以帮助您：

您应该遍历返回的所有画布对象，document.getElementsByTagName('canvas')但您将其视为单个对象

let canvases = Array.from(document.getElementsByTagName("canvas"));
canvases.forEach(canvas => {
  let ctx = canvas.getContext("2d");
  ctx.fillStyle = "red";
  ctx.fillRect(0, 0, 100, 50);
});

canvas {
  border: 1px solid black;
  height: 100px;
  width: 100px;
}

<canvas></canvas>
<canvas></canvas>
<canvas></canvas>
<canvas></canvas>
<canvas></canvas>
<canvas></canvas>

在您的示例中，它看起来像：

pdfjsLib.getDocument('http://localhost:8000/media/media/loremipsum2.pdf').then(function (pdf) {
    console.log("pdf loaded");
    pdf.getPage(1).then(function (page) {
        var scale = 0.40;
        var viewport = page.getViewport(scale);

        var canvases = document.getElementsByTagName('canvas');
        Array.from(canvases).forEach((canvas) => {
            var context = canvas.getContext('2d');
            canvas.height = viewport.height;
            canvas.width = viewport.width;

            var renderContext = {
                canvasContext: context,
                viewport: viewport
            };
            page.render(renderContext);
        });
    });
  });

编辑：您可以使用以下内容：

let can = Array.from(document.getElementsByClassName(<className>);
let can = Array.from(document.querySelectorAll(<CSS query>);
...

如果右侧不在列表中，请询问：3