Yuk Belajar Programming

Kamis, 20 Juni 2013

Load image di html5

Belajar load image di html5

Sambil browsing dan tanya taufik, salah satu teman yang sudah mengerti.
Akhirnya bisa juga .... alhamdulillah

ini dia programnya:

<html>

<head>

<title>Insert Image</title>

</head>

<body>

var canvas = document.getElementById('dasar');

var context = canvas.getContext('2d');

var Obj = new Image();

function Test(){

Obj.onload = function(){

context.drawImage(Obj,0,0,100,100)

}

Obj.src = "tangan/iron_man_helmet.jpg";

//document.body.appendChild(Obj);

}

Test();

</script>

</body>

</html>

Selasa, 11 Juni 2013

Kamis, 23 Mei 2013

Mau bikin garis melengkung di html, akhirnya mencari dulu ke mbah google.

Akhirnya ketemu deh 1. Coba dulu ah...

// Create the triangular path (with rounded corners)
context.beginPath();
// Top Corner
context.moveTo(canvasWidth/2 - x, this.padding);
context.quadraticCurveTo(canvasWidth/2, this.padding - y, canvasWidth/2 + x, this.padding);
// Right Corner
context.lineTo((canvasWidth + this.width)/2 + gamma, this.padding + this.height - gamma);
context.quadraticCurveTo((canvasWidth + this.width)/2 + y, this.padding + this.height + this.innerBorder, (canvasWidth + this.width)/2, this.padding + this.height + this.innerBorder);
// Left Corner
context.lineTo((canvasWidth - this.width)/2, this.padding + this.height + this.innerBorder);
context.quadraticCurveTo((canvasWidth - this.width)/2 - y, this.padding + this.height + this.innerBorder, (canvasWidth - this.width)/2 - gamma, this.padding + this.height - gamma);
// Close Path
context.lineTo(canvasWidth/2 - x, this.padding);
context.closePath();

http://www.williammalone.com/articles/flash-vs-html5-canvas-drawing/