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/

OOP - awal - untuk library

Barusan belajar HTML lagi
belajar ama si taufik.

untuk persiapan OOP library
ini dia:

var kotak = new kotak();
kotak.setGlow(new Glow());

function kotak(){
this.setGlow = function(glow){
}
}

Glow.js - SETELAH di sederhanakan

var GlowBenar = new Glow('rgba(0,220,200,1)','#FFFFFF');
var GlowSalah = new Glow('rgba(255,0,255,0.9)','#FFFFFF');


var sudut1 = xybutton[nosoal].sdt1;
var sudut2 = xybutton[klikbtn].sdt2;
var jumlsudut = sudut1+sudut2;
var fsudut = jumlsudut==180;
if(fsudut) GlowBenar.draw()
else GlowSalah.draw()


function Glow(clr1,clr2){
this._x = 483;
this._y = 301;
this._radius = 15;
this._color1 = clr1||'#FFFFFF';
this._color2 = clr2||'#FFFFFF';
//------------
this.draw = function(){
var startAngle
var endAngle
var counterClockwise

startAngle = 0
endAngle   = 360
counterClockwise = true;
ctx.save();
ctx.beginPath();
ctx.moveTo(this._x, this._y);
ctx.arc(this._x, this._y, this._radius, startAngle, endAngle, counterClockwise);
ctx.lineTo(this._x, this._y);
ctx.lineWidth = 2;

var grd = ctx.createRadialGradient(this._x, this._y, 0, this._x, this._y, this._radius);
grd.addColorStop(0, this._color1);
grd.addColorStop(1, this._color2);

ctx.fillStyle = grd;
ctx.fill();
ctx.restore();
}
}

Glow.js - Sebelum di sederhanakan

var createGambarGlow = new (function(){
var that = this;
that.radius = 15
that.draw = function(){

try {
var x
var y
var startAngle
var endAngle
var counterClockwise

x = 483
y = 301
startAngle = 0
endAngle   = 360
counterClockwise = true;
ctx.save();
ctx.beginPath();
ctx.moveTo(x, y);
ctx.arc(x, y, that.radius, startAngle, endAngle, counterClockwise);
ctx.lineTo(x, y);
ctx.lineWidth = 2;
//ctx.fillStyle = 'rgba(255,255,0,0.9)';// fill color

var sudut1 = xybutton[nosoal].sdt1;
var sudut2 = xybutton[klikbtn].sdt2;

var jumlsudut = sudut1+sudut2;
var fsudut = jumlsudut==180;

// create radial gradient
var grd = ctx.createRadialGradient(x, y, 0, x, y, that.radius);
if(fsudut){
grd.addColorStop(0, 'rgba(0,220,200,1)');// biru
grd.addColorStop(1, '#FFFFFF'); // putih
}else{
grd.addColorStop(0, 'rgba(255,0,255,0.9)');// merah
grd.addColorStop(1, '#FFFFFF');// putih
}

ctx.fillStyle = grd;
ctx.fill();
ctx.restore();

} catch (e) {};
}
})();

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

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