Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>Yudha Ganteng</title>
- <link rel="stylesheet" href="kotak.css" type="text/css">
- </head>
- <body>
- <div id="wrapper">
- <div id="container">
- <h1>Canvas</h1>
- <div id="content">
- <div id="utama1">Start <tr> Finish
- <canvas id="myCanvas" width="1000" height="270" style="display:none;"></canvas>
- <img id="canvasImg">
- <script type="text/javascript">
- var canvas = document.getElementById('myCanvas');
- var ctx = canvas.getContext('2d');
- //mob1
- ctx.beginPath();
- ctx.moveTo(36,132);//body
- ctx.quadraticCurveTo(35,113,44,99);
- ctx.quadraticCurveTo(63,95,87,94);
- ctx.quadraticCurveTo(160,60,234,71);
- ctx.lineTo(259,92);
- ctx.lineTo(319,91);
- ctx.lineTo(352,97);
- ctx.lineTo(359,101);
- ctx.lineTo(356,113);
- ctx.lineTo(359,116);
- ctx.lineTo(355,122);
- ctx.lineTo(346,131);
- ctx.lineTo(329,132);
- ctx.quadraticCurveTo(328,120,320,112);
- ctx.lineTo(292,112);
- ctx.quadraticCurveTo(283,112,277,124);
- ctx.quadraticCurveTo(275,131,270,138);
- ctx.lineTo(146,138);
- ctx.quadraticCurveTo(141,124,130,118);
- ctx.quadraticCurveTo(106,115,86,136);
- ctx.lineTo(36,132);
- ctx.moveTo(346,131);
- ctx.lineTo(354,131);
- ctx.lineTo(355,123);
- ctx.moveTo(356,99);
- ctx.lineTo(352,104);
- ctx.lineTo(352,117);
- ctx.lineTo(357,120);
- ctx.moveTo(354,97);
- ctx.quadraticCurveTo(345,102,349,118);
- ctx.moveTo(93,131);
- ctx.quadraticCurveTo(133,132,143,129);
- ctx.moveTo(143,129);
- ctx.lineTo(189,126);
- ctx.quadraticCurveTo(219,124,242,123);
- ctx.quadraticCurveTo(265,120,277,125);
- ctx.moveTo(354,119);
- ctx.lineTo(326,119);
- ctx.moveTo(250,94);//kaca depan
- ctx.quadraticCurveTo(256,94,258,91);
- ctx.lineTo(235,74);
- ctx.lineTo(231,76);
- ctx.lineTo(250,94);
- ctx.stroke(3);
- var dataURL = canvas.toDataURL();
- </script>
- <canvas id="Canvas" width="900" height="260" style="display:none;"></canvas>
- <img id="mobImg">
- <script type="text/javascript">
- var canvas = document.getElementById('Canvas');
- var ctx = canvas.getContext('2d');
- //mob2
- ctx.beginPath();
- ctx.moveTo(86,230);//body
- ctx.quadraticCurveTo(48,229,33,210);
- ctx.lineTo(38,185);
- ctx.lineTo(90,185);
- ctx.lineTo(128,156);
- ctx.quadraticCurveTo(215,150,224,162);
- ctx.lineTo(258,187);
- ctx.quadraticCurveTo(308,187,366,201);
- ctx.lineTo(363,214);
- ctx.lineTo(358,219);
- ctx.lineTo(366,220);
- ctx.lineTo(359,234);
- ctx.lineTo(337,236);
- ctx.quadraticCurveTo(336,216,314,212);
- ctx.quadraticCurveTo(290,215,284,238);
- ctx.lineTo(136,238);
- ctx.quadraticCurveTo(140,219,119,210);
- ctx.quadraticCurveTo(99,207,86,230);
- ctx.moveTo(90,185);
- ctx.lineTo(144,185);
- ctx.lineTo(156,190);
- ctx.lineTo(300,190);
- ctx.moveTo(218,158);//kaca depan
- ctx.lineTo(214,162);
- ctx.lineTo(250,188);
- ctx.lineTo(254,183);
- ctx.moveTo(122,160);//kaca belakang
- ctx.lineTo(125,164);
- ctx.lineTo(99,183);
- ctx.lineTo(96,179);
- ctx.stroke();
- ctx.moveTo(244,189);//jendela
- ctx.quadraticCurveTo(210,162,204,163);
- ctx.lineTo(150,163);
- ctx.lineTo(132,183);
- ctx.moveTo(228,189);
- ctx.lineTo(218,171);
- ctx.moveTo(160,188);
- ctx.lineTo(156,164);
- ctx.strokeStyle = '#FF0000';
- ctx.stroke(7);
- // save canvas image as data url (png format by default)
- var dataURL1 = canvas.toDataURL();
- // set canvasImg image src to dataURL
- document.getElementById('mobImg').src = dataURL1;
- document.getElementById('canvasImg').src = dataURL;
- var mobilObj = null;
- var mobilObj2 = null;
- var animate ;
- function init(){
- mobilObj = document.getElementById('canvasImg');
- mobilObj.style.position= 'relative';
- mobilObj.style.left= '0px';
- mobilObj2 = document.getElementById('mobImg');
- mobilObj2.style.position= 'relative';
- mobilObj2.style.left= '0px';
- }
- function start(){
- mobilObj.style.left = parseInt(mobilObj.style.left) + 2 + 'px';
- mobilObj2.style.left = parseInt(mobilObj2.style.left) + 3 + 'px';
- animate = setTimeout(start,1);
- }
- function stop(){
- clearTimeout(animate);
- mobilObj.style.left = '550px';
- mobilObj.style.left = '500px';
- }
- window.onload =init;
- </script>
- </div>
- </div>
- <div id="sidebar1">
- <li class="widget">
- <h2>COMMAND</h2>
- <ul>
- <li> <input value="Start" onclick="start();" type="button"> </li>
- <p>
- <li><input value="Stop" onclick="stop();" type="button"></li>
- </ul>
- <ul>
- <li><a href="home.html">Home</a></li>
- <li><a href="profil.html">Profil</a></li>
- <li><a href="animasi.html">Animasi</a></li>
- <li><a href="about.html">About it</a></li>
- </ul></li>
- </div>
- </div>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement