Как использовать один элемент холста в качестве фона для другого элемента холста?

Я работаю над учебником по холсту HTML5 на следующем веб-сайте: Mozilla Developers. В этом уроке говорится, что вы можете использовать элемент canvas в качестве фона другого элемента canvas. Я попытался сделать именно это со следующей html-страницей. К сожалению, отладчик в хроме говорит, что не удалось загрузить ресурс. Могу ли я ссылки на источник холст объекта правильный путь в функции 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();

Что это делает возвращает строку в кодировке Base64 данных в формате PNG изображения элемента холста ,

источник

2010-10-21 00:55:37 user477685

Ваше решение является правильным, но вы делаете его waaaay более сложным, чем это должно быть.

Все, что вам нужно сделать, не это, ничего любой любитель:

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

Как использовать один элемент холста в качестве фона для другого элемента холста?

ответ

Смежные вопросы