Halaman

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:

<DOCTYPE = HTML>
<html lang = "en">

<html>
<head>
<title>Insert Image</title>
</head>

<body>
<canvas id="dasar" width="640" height="480"></canvas>
<script>
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>


Membuat Kabel Melengkung

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/