Halaman

HTML5 - error di firefox

Kemarin ada error di html5 yang saya buat, ketika dijalankan dengan Firefox.

akhirnya googling deh ...
ketemu: http://www.lynnnayko.com/2012/06/declaration-of-character-encoding-in.html

Ini dia Error nya:
Error: The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol.


Nah begini caranya supaya menghilangkan error tersebut:

Letakkan :
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />

di <head>
seperti ini:



!DOCTYPE HTML>
<html>
<head>
<title>Animasi PNG Sequence</title>

<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
<style>
body {
margin: 0px;
padding: 0px;
}

</style>
.........
</html>

resize_canvas html5

function resize_canvas(){
var sizecanvas = document.getElementById("myCanvas");
var sizecontext = sizecanvas.getContext('2d');
if (sizecanvas.width  < window.innerWidth){
sizecanvas.width  = window.innerWidth;
}

if (sizecanvas.height < window.innerHeight) {
sizecanvas.height = window.innerHeight;
}

innerWidth = window.innerWidth;
innerHeight = window.innerHeight;
outerWidth = window.outerWidth;
outerHeight = window.outerHeight;

sizeDiffW = innerWidth-canvasWidth;
sizeDiffH = innerHeight-canvasHeight;
chkscaleW = innerWidth/canvasWidth;
chkscaleH = innerHeight/canvasHeight;
scaleFix = Math.min(chkscaleW,chkscaleH);

sizecanvas.width=canvasWidth*scaleFix;
sizecanvas.height=canvasHeight*scaleFix;
context.scale(scaleFix, scaleFix);
sizecanvas.style.left=((innerWidth-canvasWidth*scaleFix)/2)+"px";
sizecanvas.style.top=((innerHeight-canvasHeight*scaleFix)/2)+"px";

sizecanvas.style.marginLeft=""+((innerWidth-canvasWidth*scaleFix)/2)+"px";
sizecanvas.style.marginTop=""+((innerHeight-canvasHeight*scaleFix)/2)+"px";
}

Menjalankan animasi png sequence dengan html5

Menjalankan animasi png sequence dengan html5
Png sequence adalah urutan file png dengan index, yang sudah dipersiapkan sebelumnya.

Ini dia programnya :

<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="480" height="800"></canvas>
<script>
window.requestAnimFrame = (function(callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
var iframe = 1;
var maxframe = 10;
var ArrImage = new Array();
for(var i=1;i<=10;i++){
if(i<10) ArrImage[i] = 'images/images000'+i+'.png';
else if(i<100) ArrImage[i] = 'images/images00'+i+'.png';
}

var imageObj = new Image();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

 function animate() {


// update

 // clear
//context.clearRect(0, 0, canvas.width, canvas.height);

 // draw stuff
imageObj.onload = function() {
context.drawImage(imageObj, 0, 0);
};
imageObj.src = ArrImage[Math.floor(iframe)];

if(iframe<maxframe) iframe+=0.1;
else iframe=maxframe;

 // request new frame
requestAnimFrame(function() {
 animate();
});
}

animate();

 </script>
</body>
</html>



mohon koreksi jika ada kekeliruan di program saya
maklum, masih belajar :)

semoga bermanfaat

sumber:
http://www.html5canvastutorials.com/tutorials/html5-canvas-image-loader/
Langganan: Komentar (Atom)