Login

gwen226 · 11-24-2018, 03:27 PM

Hello,

So here, as the title indicates I would like to display an animated image with a script built into my view.php.

So I started by creating and launching my .php page out CodeIgniter (there is no problem all works) but as soon as I try to open my view the script starts but the image does not appear.However, I have checked that the path of the image in the script is good, so if someone sees what the problem is?

Here is my view.php:

PHP Code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
 
 
<head>
    <meta charset="utf-8">
    <title></title>
</head>
 
<header>
 
</header>
 
<body style="margin:0px; overflow: hidden">
 
    <main>
 
        <canvas id='canvas'></canvas><br />
 
        <button onclick='moveRight()' style="border-radius:50px; width: 50px; height: 50px; border:none;">Faire bouger</button>
 
        <script>
            var speed2 = 12;
 
            var canvasWidth = window.innerWidth + 80;
            var canvasHeight = window.innerHeight - 100;
 
            var spriteWidth = 280;
            var spriteHeight = 50;
 
            var rows = 1;
            var cols = 4;
 
            var trackRight = 0;
            var trackLeft = 1;
 
            var width = spriteWidth / cols;
            var height = spriteHeight;
 
            var curFrame = 1;
            var frameCount = 4;
 
            var x = -80;
            var y = 200;
            var srcX = 0;
            var srcY = 0;
 
            var right = false;
 
            var speed = 0;
 
            var canvas = document.getElementById('canvas');
 
            canvas.width = canvasWidth;
            canvas.height = canvasHeight;
 
            var ctx = canvas.getContext("2d");
 
            var character = new Image();
 
            character.src = "MonImage.png";
 
            setInterval(draw, 60);
 
 
            function updateFrame() {
 
                curFrame = ++curFrame % frameCount;
 
                srcX = curFrame * width;
 
                ctx.clearRect(x * 2, y * 2, width * 2, height * 2);
 
                if (right && x < canvasWidth - width) {
                    srcY = trackRight * height;
                    x = x + speed;
                }
 
 
            }
 
            function draw() {
                if (x * 2 > window.innerWidth) {
                    x = -80;
                    right = false;
                    speed = 0;
                    alert(1);
                }
                updateFrame();
 
                ctx.drawImage(character, srcX, srcY, width, height, x * 2, y * 2, width * 2, height * 2);
 
            }
 
 
 
            function moveRight() {
                right = true;
                speed = speed + 12;
 
            }
 
        </script>
         
    </main>
 
</body>
 
</html> 

Thanks for your help !