source code
<html lang="en">
<head>
<title>Smily dengan Javascript Canvas</title>
<style type="text/css">
canvas {
border: 1px solid black;
background-color:#6666FF;
}
</style>
<script type="text/javascript" >
function smily() {
var cv = document.getElementById('canvas').getContext('2d');
if (cv == 'undefined') alert('canvas failed');
//kepala
cv.beginPath();
cv.arc(150,150,120,0,Math.PI*2,true);
cv.fillStyle='yellow';
cv.fill();
cv.stroke();
cv.closePath();
//mata
cv.beginPath();
cv.arc(90,110,10,0,Math.PI*2,true);
cv.arc(200,110,10,0,Math.PI*2,true);
cv.fillStyle='black';
cv.fill();
cv.closePath();
//mulut
cv.beginPath();
cv.arc(150,130,100,0.6,2.5,false);
cv.stroke();
cv.closePath();
}
</script>
</head>
<body onLoad="smily();">
<canvas id="canvas" width="300" height="300"></canvas>
</body>
</html>
<head>
<title>Smily dengan Javascript Canvas</title>
<style type="text/css">
canvas {
border: 1px solid black;
background-color:#6666FF;
}
</style>
<script type="text/javascript" >
function smily() {
var cv = document.getElementById('canvas').getContext('2d');
if (cv == 'undefined') alert('canvas failed');
//kepala
cv.beginPath();
cv.arc(150,150,120,0,Math.PI*2,true);
cv.fillStyle='yellow';
cv.fill();
cv.stroke();
cv.closePath();
//mata
cv.beginPath();
cv.arc(90,110,10,0,Math.PI*2,true);
cv.arc(200,110,10,0,Math.PI*2,true);
cv.fillStyle='black';
cv.fill();
cv.closePath();
//mulut
cv.beginPath();
cv.arc(150,130,100,0.6,2.5,false);
cv.stroke();
cv.closePath();
}
</script>
</head>
<body onLoad="smily();">
<canvas id="canvas" width="300" height="300"></canvas>
</body>
</html>
Tidak ada komentar:
Posting Komentar