画布里面的html5画布

Question

我们可以在现有画布中放置画布吗？如果可以的话,请帮助在html5中完成.

Answer 1

有两种方法可以解释您的问题.一个是你的意思是实际嵌套canvas元素本身,如下所示:

<canvas id="outer">
    <canvas id="inner"></canvas>
</canvas>

这是合法的(根据validator.nu)但没有意义.canvas元素内的内容用于后备.canvas使用元素内容的唯一方法是浏览器不支持canvas,在这种情况下,内部canvas元素无论如何都不会被看到.

解释问题的另一种可能方法是,您可以在一个画布中显示另一个画布.这非常简单,canvas元素可以用作第一个参数context.drawImage().如果你有两个canvas要素:

<canvas id="c1" width="200" height="200"></canvas>
<canvas id="c2" width="200" height="200"></canvas>

然后这个脚本(使用jQuery)将在第一个上绘制canvas,然后将四次作为图像添加到第二个canvas:

var c1 = $('#c1');
var ctx1 = c1[0].getContext('2d');

ctx1.fillRect(50,50,100,100);

var c2 = $('#c2');
var ctx2 = c2[0].getContext('2d');

ctx2.drawImage(c1[0],0,0,100,100);
ctx2.drawImage(c1[0],100,0,100,100);
ctx2.drawImage(c1[0],0,100,100,100);
ctx2.drawImage(c1[0],100,100,100,100);

但是,为什么你呢？你可以使用一个复制canvas上面第二个图像:

var c1 = $('#c1');
var ctx1 = c1[0].getContext('2d');

ctx1.fillRect(25,25,50,50);
ctx1.fillRect(125,25,50,50);
ctx1.fillRect(25,125,50,50);
ctx1.fillRect(125,125,50,50);

总而言之:是的,这是可能的,但在简单使用中并不是必需的.