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
}
}
Meng-Copy nilai suatu Array ke Array lain
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
}
}
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)