多个动态画布元素?

时间:2011-04-11 12:02:10

标签: javascript jquery canvas

我有一些代码使用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();

    });

2 个答案:

答案 0 :(得分:2)

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

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

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

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

http://jsfiddle.net/U6QLN/

答案 1 :(得分:1)

  

这可能吗?

不,这是不可能的。

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

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