Pada modul ini kita belajar untuk membuat web multimedia. Web multimedia merupakan web yang menampilkan gambar, animasi, teks, audio dll. Hal pertama yang kita pelajari adalah membuat gambar path dengan tampilan smiley seperti gambar di bawah ini :
 | ||||||
| Smiley with javascript canvas |
1. <html lang="en">
2. <head>
3. <title>Smily With Javascript Canvas</title>
4. <link rel="shortcut icon" href="smile.jpg">
5. <style type="text/css">
6. canvas {
7. border: 5px solid green;
8. background-color:#009900;
9. }
10.</style>
11.<script type="text/javascript" >
12.function smily() {
13.var cv = document.getElementById('canvas').getContext('2d');
14.if (cv == 'undefined') alert('canvas failed');
15.cv.beginPath();
16.cv.arc(150,150,120,0,Math.PI*2,true);
17.cv.fillStyle='yellow';
18.cv.fill();
19.cv.stroke();
20.cv.closePath();
21.cv.beginPath();
22.cv.arc(100,110,10,0,Math.PI*2,true);
23.cv.arc(200,110,10,0,Math.PI*2,true);
24.cv.fillStyle='green';
25.cv.fill();
26.cv.closePath();
27.cv.beginPath();
28.cv.arc(150,125,105,0.6,2.5,false);
29.cv.stroke();
30.cv.closePath();
31.}
32. </script>
33.</head>
34.<body onLoad="smily();">
35. <canvas id="canvas" width="300" height="300"></canvas>
36.</body>
37.</html>
0 comments
Posting Komentar