-
gwen226
Newbie
-
Posts: 3
Threads: 1
Joined: Nov 2018
Reputation:
0
11-24-2018, 03:27 PM
(This post was last modified: 11-24-2018, 04:02 PM by ciadmin.)
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 !
-
gwen226
Newbie
-
Posts: 3
Threads: 1
Joined: Nov 2018
Reputation:
0
(11-25-2018, 04:40 AM)InsiteFX Wrote: Place your script in document.ready
Thx but I don't understand the syntax ... can you show me an example without reciting all my code?
I have to do that in my view.php ?
-
gwen226
Newbie
-
Posts: 3
Threads: 1
Joined: Nov 2018
Reputation:
0
how do you use document.ready pls
-
InsiteFX
Super Moderator
-
Posts: 5,930
Threads: 222
Joined: Oct 2014
Reputation:
205
It depends on what JavaScript you are using.
Code: // For plain JavaScript.
(function(funcName, baseObj) {
// The public function name defaults to window.docReady
// but you can pass in your own object and own function name and those will be used
// if you want to put them in a different namespace
funcName = funcName || "docReady";
baseObj = baseObj || window;
var readyList = [];
var readyFired = false;
var readyEventHandlersInstalled = false;
// call this when the document is ready
// this function protects itself against being called more than once
function ready() {
if (!readyFired) {
// this must be set to true before we start calling callbacks
readyFired = true;
for (var i = 0; i < readyList.length; i++) {
// if a callback here happens to add new ready handlers,
// the docReady() function will see that it already fired
// and will schedule the callback to run right after
// this event loop finishes so all handlers will still execute
// in order and no new ones will be added to the readyList
// while we are processing the list
readyList[i].fn.call(window, readyList[i].ctx);
}
// allow any closures held by these functions to free
readyList = [];
}
}
function readyStateChange() {
if ( document.readyState === "complete" ) {
ready();
}
}
// This is the one public interface
// docReady(fn, context);
// the context argument is optional - if present, it will be passed
// as an argument to the callback
baseObj[funcName] = function(callback, context) {
if (typeof callback !== "function") {
throw new TypeError("callback for docReady(fn) must be a function");
}
// if ready has already fired, then just schedule the callback
// to fire asynchronously, but right away
if (readyFired) {
setTimeout(function() {callback(context);}, 1);
return;
} else {
// add the function and context to the list
readyList.push({fn: callback, ctx: context});
}
// if document already ready to go, schedule the ready function to run
if (document.readyState === "complete") {
setTimeout(ready, 1);
} else if (!readyEventHandlersInstalled) {
// otherwise if we don't have event handlers installed, install them
if (document.addEventListener) {
// first choice is DOMContentLoaded event
document.addEventListener("DOMContentLoaded", ready, false);
// backup is window load event
window.addEventListener("load", ready, false);
} else {
// must be IE
document.attachEvent("onreadystatechange", readyStateChange);
window.attachEvent("onload", ready);
}
readyEventHandlersInstalled = true;
}
}
})("docReady", window);
// Usage:
// pass a function reference
docReady(fn);
// use an anonymous function
docReady(function() {
// code here
});
// pass a function reference and a context
// the context will be passed to the function as the first argument
docReady(fn, context);
// use an anonymous function with a context
docReady(function(context) {
// code here that can use the context argument that was passed to docReady
}, ctx);
// If your using jQuery then it is like this:
// A $( document ).ready() block.
$( document ).ready(function() {
console.log( "ready!" );
});
But there you go.
What did you Try? What did you Get? What did you Expect?
Joined CodeIgniter Community 2009. ( Skype: insitfx )
|
