2011-08-23 00:53:25

License: MIT License

Fork: 0

Fav: 1

View: 739

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();

}

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> body { background-color: #DDDDDD; font: 30px sans-serif; }

Play on jsdo.it games
Share
Embed
QR
Tag
Download

Complete!

Description どんなゲームですか？

Control Device

	スマートフォンコントローラー jsdo.it WebSocket Controller»
	マウス
	キーボード
	タッチデバイス

Fullscreen

有効
無効

jsdo.it games から削除する Submit

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>

QR Code