画布里面的html5的画布 [英] Canvas inside canvas of html5

问题描述

解决方案

我们可以在现有画布中放置画布有两种可能的方法来解释你的问题。一个是你的意思是实际嵌套 canvas 元素本身，像这样：

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

这是合法的（根据 validator.nu ），但毫无意义。 canvas 元素中的内容用于后备。使用 canvas 元素中的内容的唯一方法是如果浏览器不支持 canvas ，在这种情况下

解释你的问题的另一种可能的方法是你可以显示在另一个画布上显示的图像。这很简单， canvas 元素可以用作 context.drawImage（）的第一个参数。如果您有两个 canvas 元素：

 < canvas id = c1width =200height =200>< / canvas> 
< canvas id =c2width =200height =200>< / canvas> 
  

然后脚本（使用jQuery）将绘制在第一个画布，然后将四次作为图像添加到第二个画布：

  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,0100,100）; 
 ctx2.drawImage（c1 [0]，0,100,100,100）; 
 ctx2.drawImage（c1 [0]，100,100,100,100） 
  

但是，为什么呢？您可以复制上方的第二个画布的图片：

  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）; 
  

所以在总结：是的，这是可能的，但它不是真正必要的简单使用。 >

Can we place a canvas inside the existing canvas?If we can,please help to do it in html5.

解决方案

There are two possible ways to interpret your question. One is that you mean to actually nest canvas elements themselves, like this:

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

This is legal (according to validator.nu) but pointless. The content inside the canvas element is for fallback. The only way the content inside the canvas element gets used is if the browser doesn't support canvas, in which case the inner canvas element won't be seen anyway.

The other possible way to interpret your question is can you display the image shown on one canvas within another. This is quite straightforward, a canvas element can be used as the first parameter to context.drawImage(). If you have two canvas elements:

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

Then this script (using jQuery) will draw on the first canvas and then add that four times as an image to the second 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);

But again, why would you? You can replicate the image of the second canvas above just using one:

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);

So in summary: yes, it's possible, but it's not really necessary in simple use.

这篇关于画布里面的html5的画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！