如何使用一个画布元素作为另一个画布元素的背景？

我正在通过以下网站上的HTML5画布教程工作： Mozilla Developers。在本教程中，他们说您可以使用画布元素作为另一个画布元素的背景。我试图用下面的html页面来做到这一点。不幸的是，chrome中的调试器表示无法加载资源。我在引用来源画布功能DRAW2（对象的正确方法）？：如何使用一个画布元素作为另一个画布元素的背景？

<html> 
<head> 
<title>CANVAS TESTING</title> 
<script type="text/javascript"> 

function draw() 
    { 
    var ctx = document.getElementById('tutorial').getContext('2d'); 

    ctx.translate(0,document.getElementById('tutorial').height); 
    ctx.scale(1,-1) 

    // Create gradients 
    var lingrad = ctx.createLinearGradient(0,0,0,150); 
    lingrad.addColorStop(0, '#fff'); 
    lingrad.addColorStop(0.5, '#66CC00'); 
    lingrad.addColorStop(0.5, '#fff'); 
    lingrad.addColorStop(1, '#00ABEB'); 

    var lingrad2 = ctx.createLinearGradient(0,50,0,95); 
    lingrad2.addColorStop(0.25, 'rgba(0,0,0,0)'); 
    lingrad2.addColorStop(0.75, '#000'); 

    // assign gradients to fill and stroke styles 
    ctx.fillStyle = lingrad; 
    ctx.strokeStyle = lingrad2; 

    // draw shapes 
    ctx.fillRect(10,10,130,130); 
    ctx.strokeRect(50,50,50,50); 

    } 
function draw2() 
    { 
    ctx=document.getElementById('canvas').getContext('2d'); 
    img = new Image(); 
    img.onload = function() 
     { 
     ctx.drawImage(img,0,0); 
     } 
    img.src = document.getElementById('tutorial'); 
    } 
</script> 
</head> 
<body onload="draw()"> 
<p>This is a test of canvas element.</p> 
<canvas id="tutorial" width="400" height="400" style="background-color: black"></canvas> 
<br /><br /> 
<canvas id="canvas" width="400" height="400" style="background-color: black"></canvas> 
<p> 
<input type="button" onclick="draw2()" value="Draw!" /> 
</p> 
</body>

来源

2010-10-21 user477685

好吧，我只是找到了答案，我的问题。

打算关闭在DRAW2（）函数，我需要我的img.src设置如下：

img.src = document.getElementById('tutorial').toDataURL();

这样做是返回canvas元素的PNG图像的base64编码数据串。

来源

2010-10-21 00:55:37 user477685

你的解决方案有点不错，但你要让它变得比它要复杂得多。

所有你需要做的就是这个，没有任何票友：

var tut = document.getElementById('tutorial'); 
ctx.drawImage(tut,0,0); // just put in the canvas you want to draw!

Here's a live jsfiddle example如果您需要更详细

来源

2010-10-21 03:30:04

如何使用一个画布元素作为另一个画布元素的背景？

回答

相关问题