Forked from: stv_tribute's HTML5 Canvas機能でドラえもんを描いてみた。 diff(140) HTML5 Canvas機能でアンパンマンを描いてみた。forked: HTML5 Canvas機能でドラえもんを描いてみた。 Yutaka.Horik.. Follow 2011-08-23 00:53:25 License: MIT License Fork0 Fav1 View739 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 75 lines HTML 2 lines CSS 1 lines HTML5 Canvas機能でアンパンマンを描いてみた。forked: HTML5 Canvas機能でドラえもんを描いてみた。 // forked from stv_tribute's "HTML5 Canvas機能でドラえもんを描いてみた。" http://jsdo.it/stv_tribute/wP74 onload = function () { drawCanvas(); }; function drawCanvas() { var canvas = document.getElementById("myCanvas"); if (!canvas || !canvas.getContext) { return false; } var ctx = canvas.getContext("2d"); // 顔 ctx.beginPath(); ctx.arc(200, 100, 85, 0, 360 * Math.PI / 180, 120 * Math.PI / 180, true); ctx.fillStyle = 'rgb(241, 187, 147)'; ctx.fill(); ctx.beginPath(); ctx.arc(256, 105, 24, 0, 360 * Math.PI / 180, false); ctx.fillStyle = 'rgb(214, 35, 67)'; ctx.fill(); ctx.stroke(); ctx.beginPath(); ctx.arc(147, 105, 24, 0, 360 * Math.PI / 180, false); ctx.fillStyle = 'rgb(214, 35, 67)'; ctx.fill(); ctx.stroke(); // 左の目 ctx.beginPath(); ctx.scale(0.6, 1); ctx.arc(305, 60, 15, 0, 360 * Math.PI / 180, false); ctx.fillStyle = 'rgb(0, 0, 0)'; ctx.fill(); ctx.stroke(); // 右の目 ctx.beginPath(); ctx.scale(1, 1); ctx.arc(365, 60, 15, 0, 360 * Math.PI / 180, false); ctx.fillStyle = 'rgb(0, 0, 0)'; ctx.fill(); ctx.stroke(); // 鼻(赤い丸) ctx.beginPath(); ctx.scale(2, 1); ctx.arc(168, 105, 23, 0, 360 * Math.PI / 180, false); ctx.fillStyle = 'rgb(214, 35, 67)'; ctx.fill(); ctx.stroke(); ctx.beginPath(); ctx.lineWidth = 3; ctx.scale(1, 0.5); ctx.arc(168, 260, 35, 1 * Math.PI / 180, 179 * Math.PI / 180, false); ctx.stroke(); //ctx.beginPath(); //ctx.scale(0.6, 1); //ctx.arc(369, 260, 35, 1 * Math.PI / 180, 179 * Math.PI / 180, true); //ctx.fill(); //ctx.stroke(); } <canvas id="myCanvas" width="400" height="400"></canvas> HTML5 Canvas機能でアンパンマンを描いてみた。forked: HTML5 Canvas機能でドラえもんを描いてみた。 body { background-color: #DDDDDD; font: 30px sans-serif; } // forked from stv_tribute's "HTML5 Canvas機能でドラえもんを描いてみた。" http://jsdo.it/stv_tribute/wP74 onload = function () { drawCanvas(); }; function drawCanvas() { var canvas = document.getElementById("myCanvas"); if (!canvas || !canvas.getContext) { return false; } var ctx = canvas.getContext("2d"); // 顔 ctx.beginPath(); ctx.arc(200, 100, 85, 0, 360 * Math.PI / 180, 120 * Math.PI / 180, true); ctx.fillStyle = 'rgb(241, 187, 147)'; ctx.fill(); ctx.beginPath(); ctx.arc(256, 105, 24, 0, 360 * Math.PI / 180, false); ctx.fillStyle = 'rgb(214, 35, 67)'; ctx.fill(); ctx.stroke(); ctx.beginPath(); ctx.arc(147, 105, 24, 0, 360 * Math.PI / 180, false); ctx.fillStyle = 'rgb(214, 35, 67)'; ctx.fill(); ctx.stroke(); // 左の目 ctx.beginPath(); ctx.scale(0.6, 1); ctx.arc(305, 60, 15, 0, 360 * Math.PI / 180, false); ctx.fillStyle = 'rgb(0, 0, 0)'; ctx.fill(); ctx.stroke(); // 右の目 ctx.beginPath(); ctx.scale(1, 1); ctx.arc(365, 60, 15, 0, 360 * Math.PI / 180, false); ctx.fillStyle = 'rgb(0, 0, 0)'; ctx.fill(); ctx.stroke(); // 鼻(赤い丸) ctx.beginPath(); ctx.scale(2, 1); ctx.arc(168, 105, 23, 0, 360 * Math.PI / 180, false); ctx.fillStyle = 'rgb(214, 35, 67)'; ctx.fill(); ctx.stroke(); ctx.beginPath(); ctx.lineWidth = 3; ctx.scale(1, 0.5); ctx.arc(168, 260, 35, 1 * Math.PI / 180, 179 * Math.PI / 180, false); ctx.stroke(); //ctx.beginPath(); //ctx.scale(0.6, 1); //ctx.arc(369, 260, 35, 1 * Math.PI / 180, 179 * Math.PI / 180, true); //ctx.fill(); //ctx.stroke(); } <canvas id="myCanvas" width="400" height="400"></canvas> body { background-color: #DDDDDD; font: 30px sans-serif; } use an iframe compat browser, deer Play on jsdo.it games Share Embed QR Tag Download Complete! Description どんなゲームですか? Control Device スマートフォンコントローラー jsdo.it WebSocket Controller» マウス キーボード タッチデバイス Fullscreen 有効 無効 jsdo.it games から削除する Submit Tweet style Design view Code view code <script type="text/javascript" src="http://jsdo.it/blogparts/44Cq/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/Yutaka.Horikawa/44Cq" title="HTML5 Canvas機能でアンパンマンを描いてみた。forked: HTML5 Canvas機能でドラえもんを描いてみた。">HTML5 Canvas機能でアンパンマンを描いてみた。forked: HTML5 Canvas機能でドラえもんを描いてみた。 - jsdo.it - share JavaScript, HTML5 and CSS</a></p> Canvas HTML5 Tweet twitter Tags Canvas HTML5 Favorite by Akiyah Forked sort new page view favorite forked forked: HTML5 Canvas機能でアンパンマンを.. Akiyah 00 200views 84/2/0 Canvas HTML5