Yuk Belajar Programming: html5

Tampilkan postingan dengan label html5. Tampilkan semua postingan

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

Jumat, 16 Agustus 2013

Pangkat di javascript

Ternyata di javascript mudah sekali mencari nilai dari bilangan berpangkat.

Misal nilai = x^y (mencari x pangkat y)
nilai = Math.pow(x,y)

Contoh dengan angka:
nilai = Math.pow(3,4)
maka
nilai = 81

semoga bermanfaat :)

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

Mengubah 0.005 menjadi 0,005 dengan javascript

Lagi ngerjain kerjaan kantor, kebetulan nemuin cara lain mengubah angka yang awalnya pakai titik menjadi koma.

Begini caranya:

Misal
angka = 0.005

maka, cukup split menjadi dua bagian menggunakan string.split(separator,limit):

angkasplit = ""+angka;
angkasplit = angka.split('.',limit);

hasil split menjadi:
0,005

Semoga bermanfaat :)

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

Senin, 18 Maret 2013

Membuat Kurva di HTML5

format nya
context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);

contoh penggunaan:

context.beginPath();
context.moveTo(188, 130);
context.bezierCurveTo(140, 10, 388, 10, 388, 170);
context.lineWidth = 10;

sumber
http://www.html5canvastutorials.com/tutorials/html5-canvas-bezier-curves/

Senin, 18 Februari 2013

Properti Garis di HTML5 (line property)

// ketebalan garis
context.lineWidth = 5;

// warna garis
context.strokeStyle = 'blue';

// model ujung garis
ada 3 model:
1. context.lineCap = 'butt';
2. context.lineCap = 'round';
3. context.lineCap = 'square';

Selasa, 12 Februari 2013

Gradient di HTML5

Hari ini belajar mewarnai objek di HTML5, dan warnanya gradientfill.
Setelah beberapa kali mencoba, akhirnya berhasil juga.

Googling dulu, terus dapet ini nih:
http://www.nixtu.info/2010/07/html5-canvas-gradients-radial-gradient.html
http://www.imajine.in/tutorials/html5/canvas.aspx
http://stackoverflow.com/questions/8793414/how-can-i-make-the-gradient-stops-in-a-css3-linear-gradient
http://en.wikibooks.org/wiki/Cascading_Style_Sheets/Color

routine programnya:

for(var i=0;i<3;i++){
ctx.save();
ctx.beginPath();
ctx.arc(ArrTitik[i].x, ArrTitik[i].y, RadiusCircle, (Math.PI/180)*0, (Math.PI/180)*360, false);
// create radial gradient
//var grdRadial=context.createRadialGradient(startX, startY, startRadius, endX, endY, endRadius);
//grdRadial.addColorStop(offset, color);
//rgba(0-255, 0-255, 0-255, alpha)
var grdRadial = ctx.createRadialGradient(ArrTitik[i].x,ArrTitik[i].y, 0, ArrTitik[i].x,ArrTitik[i].y, 360);
grdRadial.addColorStop(0, 'rgba(255, 50, 50, 0.5)');
grdRadial.addColorStop(0.1, 'rgba(255, 50, 50, 0)');
ctx.fillStyle = grdRadial;
ctx.fill();
ctx.closePath();
ctx.restore();
}

Program di atas, untuk membuat 3 buah titik yang gradient.
Hasilnya:

Alhamdulillah berhasil :)

Minggu, 03 Februari 2013

Mulai Beralih ke HTML5 - Heading

http://www.w3schools.com/cssref/tryit.asp?filename=trycss_zindex

<!DOCTYPE html>
<html>
<head>
<style>
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</style>
</head>

<body>
<h1>This is a heading</h1>
<img src="w3css.gif" width="100" height="140" />
<p>Because the image has a z-index of -1, it will be placed behind the text.</p>
</body>
</html>

-absolute / relative

Yuk Belajar Programming

Halaman