• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Canvas tag in body tag integrieren <<body onload="???">>

Alemantico

Neues Mitglied
Hi Guys,

Man, ich würde mich so freuen, wenn ich irgendwie eine hilfreiche Antwort auf das Problem bekommen könnte, mit welchem ich mich schon 2 volle Tage herumschlagen muss. Ok, hier kommts:

Mit Hilfe von html5 habe ich mit einen Canvas Tag erstellt und eine Slideshow gebastelt. Als separate Seite funktioniert diese Slideshow auch wunderbar, nur bin ich irgendwie einfach nicht in der Lage diese durch den "onload"- Befehl im Body tag auf meiner Seite sichtbar zu machen<<body onload="?">>. Sicherlich liegt dies auch an den vielen Funktionen, die ich nicht in eine weitere Funktion verschachteln kann und dann zum "onload"- Befehl hinzugefügt wird. Bitte, kann mir da jemand einen Tip geben, wie ich das Problem beheben könnte? Noch eine Bitte, damit Du Deine Zeit nicht sinnlos verschwendest!: Falls Du Dir wirklich die Zeit nimmst mir zu helfen, wäre es super, wenn Du es mir mit so einfachen Worten erklären könntest wie möglich! Ganz ganz vielen Dank im Voraus! Hier ist mein komplettes Script:

<script type="text/javascript">
<!--
var imagePaths = ["mein image fad"];

var showCanvas = null;
var showCanvasCtx = null;
var img = document.createElement("img");
var currentImage = 0;
var revealTimer;


window.onload = function () {
showCanvas = document.getElementById('showCanvas').style.display = 'none';;
showCanvasCtx = showCanvas.getContext('2d');

img.setAttribute('width','750');
img.setAttribute('height','300');
switchImage();

// start the animation
setInterval(switchImage,3000);
}

function switchImage() {
img.setAttribute('src',imagePaths[currentImage++]);
if (currentImage >= imagePaths.length)
currentImage = 0;

showCanvasCtx.globalAlpha = 0.1;
revealTimer = setInterval(revealImage,100);
}

function revealImage() {
showCanvasCtx.save();
showCanvasCtx.drawImage(img,0,0,750,300);
showCanvasCtx.globalAlpha += 0.1;
if (showCanvasCtx.globalAlpha >= 1.0)
clearInterval(revealTimer);
showCanvasCtx.restore();
}

-->
</script>
 
Willkommen im Forum.

Was soll denn das display: none; da?

Bitte poste Beispiele, bei denen man nicht noch die Hälfte hinzufügen muss. Das ist so ein Krampf und so unnötig.

Halbwegs testbares Beispiel:

HTML:
<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <title>title</title>
<script type="text/javascript">
<!--
var imagePaths = [
    "http://upload.wikimedia.org/wikipedia/commons/thumb/2/27/PHP-logo.svg/300px-PHP-logo.svg.png",
    "http://upload.wikimedia.org/wikipedia/de/thumb/1/1f/Logo_MySQL.svg/250px-Logo_MySQL.svg.png"
];

var showCanvas = null;
var showCanvasCtx = null;
var img = document.createElement("img");
var currentImage = 0;
var revealTimer;


window.onload = function ()
{
    showCanvas = document.getElementById('showCanvas');
    showCanvasCtx = showCanvas.getContext('2d');

    img.setAttribute('width','750');
    img.setAttribute('height','300');
    switchImage();

    // start the animation
    setInterval(switchImage,3000);
};

function switchImage()
{
    img.setAttribute('src',imagePaths[currentImage++]);

    if (currentImage >= imagePaths.length)
        currentImage = 0;

    showCanvasCtx.globalAlpha = 0.1;
    revealTimer = setInterval(revealImage,100);
}

function revealImage()
{
    showCanvasCtx.save();
    showCanvasCtx.drawImage(img,0,0,750,300);
    showCanvasCtx.globalAlpha += 0.1;

    if (showCanvasCtx.globalAlpha >= 1.0)
        clearInterval(revealTimer);

    showCanvasCtx.restore();
}

-->
</script>
    </head>

    <body>

        <canvas style="width:320px;height:240px;" id="showCanvas"></canvas>

    </body>

</html>
 
Zurück
Oben