javascript - 多个动态 Canvas 元素？

Question

我有一些代码使用 jquery 从图像动态生成 Canvas 元素，并且想使用 document.getElementsByName 或类似方法将单个绘图上下文应用于每个和所有这些元素，这可能吗？到目前为止，这是我的代码:

$('#imagebox img').each(function(){

      var width = $(this).width();
      var height = $(this).height();

        $('<canvas/>', {
        name: 'canv',
        css: {
          margin: '0px',
          background: '#FF0000',
          float: 'left',
          width: width,
          height: height
        }
      }).appendTo('#main'); 

          // Get the canvas element and its drawing context
        var canvas = document.getElementsByName('canv');
        var context = canvas.getContext('2d');

        /*
        |---------------------
        | Origin: Top Left
        | End: Bottom Right
        |---------------------
        */

        context.beginPath();
        context.moveTo(0, 0);
        context.lineTo(canvas.width, canvas.height);
        context.stroke();

        /*
        |---------------------
        | Origin: Top Right
        | End: Bottom Left
        |---------------------
        */

        context.save();
        context.beginPath();
        context.moveTo(canvas.width, 0);
        context.lineTo(0, canvas.height);
        context.stroke();
        context.restore();

    });

Answer 1

是的，当然可以达到你想要的效果。

您只需在其中一个 Canvas 上下文中绘图，然后在所有其他 Canvas 上下文上使用 drawImage(originalContext,0,0) 即可制作完整副本。

原始 Canvas (您正在执行所有绘图操作的 Canvas )甚至不必在页面上。如果您愿意，它可以仅在代码中创建，页面上的所有内容都只是该 Canvas 上下文的 drawImage。

这是两个 Canvas “共享”上下文的示例。所有的东西都在 canvas1 上绘制，然后我缩放一个较小的 canvas2 并将 canvas1 的上下文绘制到它上面:

http://jsfiddle.net/U6QLN/