Question

我正在浏览以下网站上的HTML5画布教程： Mozilla Developers。在本教程中，他们说您可以使用canvas元素作为另一个canvas元素的背景。我试着用以下的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>

Answer 1

你的解决方案是正确的，但你使它变得比以前更加复杂。

所有你需要做的就是这个，没有任何爱好者：

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如果您需要更多详细信息

Answer 2

好的，我刚刚找到了问题的答案。

在Draw2（）中关闭函数，我需要将img.src设置为以下内容：

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

这样做会返回canvas元素的png图像的base64编码数据字符串。

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

2 个答案: