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

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

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

原始画布（您正在进行所有绘图操作的画布）甚至不必在页面上。如果您愿意，可以在代码中创建它，并且页面上的所有内容都只是该画布上下文的drawImage。

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

http://jsfiddle.net/U6QLN/

Answer 2

这可能吗？

不，这是不可能的。

Canvas元素就像任何HTML元素一样 - 每个实例最多只能在HTML页面中出现一次。

此外，每个Canvas只有一个Context，而且不能共享Contexts。

多个动态画布元素？

2 个答案: