kirim

kiriman

test posting

galih

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) {};
}
})();