Yuk Belajar Programming

Kamis, 19 September 2013

resize_canvas - setelah di modifikasi untuk Firefox

function resize_canvas(){
var t = getViewport();

innerWidth = t[0];//window.innerWidth;
innerHeight = t[1];//window.innerHeight;

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

canvas.width=canvasWidth*scaleFix;
canvas.height=canvasHeight*scaleFix;
context.scale(scaleFix, scaleFix);

canvas.style.left="100px";
canvas.style.top="100px";
canvas.style.marginLeft="100px";
canvas.style.marginTop="100px";

canvas.style.left=((innerWidth-canvasWidth*scaleFix)/2)+"px";
canvas.style.top=((innerHeight-canvasHeight*scaleFix)/2)+"px";

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

}

getViewport - window.style.left - di Firefox

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>

Rabu, 18 September 2013

resize_canvas html5

Selasa, 17 September 2013

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/

Senin, 16 September 2013

get timer di javascript

t0 = new Date().getTime();
ts = new Date().getTime() - t0;

ts adalah renggang waktu;

sumber:
http://www.w3schools.com/jsref/jsref_gettime.asp

Kamis, 12 September 2013

Animasi dengan HTML dan Flash

Cara animasi dengan HTML5 dan Flash

1. Animasikan dengan menggunakan program Flash

2. Kemudian export menjadi png sequence

File > Export > Export Movie > Save as Type PNG Sequence

shortcut : Ctrl + Alt + Shift + S

3. Save menjadi "namafile".png

Hasilnya :

namafile0001.png

namafile0002.png

namafile0003.png

....

namafile0258.png (sesuai dengan jumlah frame)

4. Masukkan di JS

var ArrImages = new Array();

var url = "image"; // folder untuk menyimpan file picture.png

var JumImg = 258

var CountImg = JumImg;

for(var i=0;i<=JumImg;i++){

ArrImages[i] = new Image();

ArrImages[i].addEventListener("load", LoadImageCheck, false);

if(i==0) ArrImages[i].src = url+"namafile0001.png";

else if(i<10) ArrImages[i].src = url+"namafile000"+i+".png";

else if(i<100) ArrImages[i].src = url+"namafile00"+i+".png";

else if(i<1000) ArrImages[i].src = url+"namafile0"+i+".png";

}