JavaScript drawImage() nicht funktioniert

Ich versuche, eine Javascript-Diashow zu erstellen, hier ist meine aktuellen Code:JavaScript drawImage() nicht funktioniert

window.onload = function() { 
 
    var c = document.getElementById("frame"); 
 
    var ctx = c.getContext("2d"); 
 
    var img = document.getElementById("s1"); 
 
    ctx.drawImage(img, 0, 0, 300, 190); 
 

 
} 
 

 

 
function scene2() { 
 
    var img1 = document.getElementById("s2"); 
 
    ctx.drawImage(img1, 0, 0, 300, 190); 
 
};

.i { 
 
    display: none; 
 
} 
 
canvas { 
 
    border: 5px solid #000000; 
 
    width: 910; 
 
    height: 500; 
 
}

<img class="i" id="s1" src="Images/scene1.png"></img> 
 
<img class="i" id="s2" src="Images/scene2.png"></img> 
 
<canvas id="frame"></canvas> 
 
<button onclick="scene2()">A</button>

Aber, wenn ich die eine Taste zum nächsten gehen drücken gleiten, bleibt es auf der ersten Folie. Wie kann ich das beheben? Danke im Voraus.

Quelle

2016-04-09 falcon user

'ctx' ist scoped nur die erste Funktion. Es ist nirgendwo anders definiert. Öffnen Sie einfach die Browser-Konsole und sehen Sie sich die Fehlermeldungen an. – Xufox

@Xufox Post als Antwort –

Darf ich fragen, warum Sie Canvas, nicht DOM verwenden? –

Funktion scene2 erstellt einen neuen Bereich für Variablen und ctx Variable ist dort nicht sichtbar. Schauen Sie sich diesen Code:

<html> 
 

 
<img class="i" id="s1" src="http://cdn.sstatic.net/Sites/stackoverflow/img/[email protected]?v=73d79a89bded&a"></img> 
 
<img class="i" id="s2" src="http://hammerjs.github.io/assets/img/stackoverflow-icon.svg"></img> 
 
<canvas id="frame"></canvas> 
 
<button onclick="scene2()">A</button> 
 

 
<script> 
 
window.onload = function() { 
 
var c=document.getElementById("frame"); 
 
var ctx=c.getContext("2d"); 
 
var img=document.getElementById("s1"); 
 
ctx.drawImage(img,0,0,300,190); 
 

 
} 
 

 

 
function scene2(){ 
 
var c=document.getElementById("frame"); 
 
var ctx=c.getContext("2d"); 
 
var img1=document.getElementById("s2"); 
 
ctx.drawImage(img1,0,0,300,190); 
 
}; 
 
</script> 
 

 
<style> 
 
.i{ 
 
display: none; 
 
} 
 
canvas{ 
 
border: 5px solid #000000; 
 
width:910; 
 
height:500; 
 
} 
 
</style> 
 

 
</html>

Quelle

2016-04-09 21:54:20 RobHil

JavaScript drawImage() nicht funktioniert

Antwort

Verwandte Themen