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';
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';
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';
Cara Rotasi Objek di HTML
Ini dia contoh routine nya:
ctx.save();
ctx.beginPath();
pindahkan dulu ke posisi sekarang
ctx.translate(xposisi,yposisi)
rotasi objek
ctx.rotate(sudutrotasi*Math.PI/180);
kembalikan ke posisi semula
ctx.translate(-xposisi,-yposisi)
ctx.moveTo(x, y);
ctx.arc(x, y, Jari , sudut1 , sudut2 , true);
ctx.lineTo(x, y);
ctx.fillStyle = warna;
ctx.fill();
ctx.closePath();
ctx.restore();
 |
| sebelum rotasi |
 |
| setelah rotasi |
Meng-Copy nilai suatu Array ke Array lain
Reminder:
Untuk Penggunaan 2 Array yang salah satu isinya berbeda.Array tidak bisa langsung di tulis seperti ini:
Array2 = Array1
seharusnya:
for(var i in Array1){
Array2[i] = Array1[i]
if(i==nilai){
Array2[i] = nilaiLain
}
}
*Berlaku untuk semua bahasa pemrograman
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:
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 :)
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
<!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
Langganan:
Komentar (Atom)