Comment utiliser un élément canvas comme toile de fond pour un autre élément canvas?

Je suis en train de travailler sur le tutoriel HTML5 sur le site Web suivant: Mozilla Developers. Dans ce tutoriel, ils disent que vous pouvez utiliser un élément canvas comme arrière-plan d'un autre élément canvas. J'ai essayé de faire exactement cela avec la page html suivante. Malheureusement, le débogueur dans le chrome dit n'a pas réussi à charger la ressource. Suis-je faisant référence à la toile source objet la manière correcte dans la fonction Draw2() ?:Comment utiliser un élément canvas comme toile de fond pour un autre élément canvas?

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

Source

2010-10-21 user477685

Ok, je viens de trouver la réponse à ma question.

va désactiver la fonction dans Draw2(), je devais mettre mon img.src à ce qui suit:

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

Qu'est-ce que cela ne se retourne la base64 chaîne de données codées de l'image .png de l'élément de toile .

Source

2010-10-21 00:55:37 user477685

Votre solution est assez correcte, mais vous la rendez plus compliquée qu'elle ne devrait l'être.

Tout ce que vous avez à faire est de cela, plus rien ne colombophile:

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 si vous avez besoin de plus de détails

Source

2010-10-21 03:30:04

Comment utiliser un élément canvas comme toile de fond pour un autre élément canvas?

Répondre

Questions connexes