Yuk Belajar Programming

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";

}

Senin, 19 Agustus 2013

Close Window - Menutup window di html5

Perlu untuk menutup windows dengan javascript?
Ini dia jawabannya:

window.close()

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

Semoga bermanfaat.

Minggu, 18 Agustus 2013

Coba HTML5 String.fromCharCode(0xB4) di w3school.com

<html>
<body>

<div id="demo">
Click the button to display character of the specified unicode number.</div>
<button onclick="myFunction()">Try it</button>

<script>
function myFunction(){
var n=String.fromCharCode(0xB4); //----> simbol kali
var n=String.fromCharCode(0xB8); //----> simbol bagi
document.getElementById("demo").innerHTML=n;
}
</script>

</body>
</html>

sumber:
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_fromcharcode

Simbol kali (x) di javascript

Format dari javascript = String.fromCharCode(angka)

angka adalah nomer identitas karakter

untuk simbol x (kali), bisa dilihat di character map = '0xB4'

jadi,

di javascript, bisa di tulis:

simbol x = String.fromCharCode(0xB4)

cara pemakaiannya:

ctx.font = '14px symbol'

ctx.fillStyle = '#000000';

ctx.textAlign = 'center';

ctx.textBaseline = 'middle';

ctx.fillText(String.fromCharCode(0xB4), 100, 100);

Semoga bermanfaaat