Canvasの基本的な描画 | Webプログラミング!(0000年度)

Time-stamp: "2013-02-04 Mon 22:10 JST hig"

Pathによる基本的な描画

  • canvas要素
  • 塗りと線
  • Path
  • 色の指定
  • moveTo, lineTo, arc

サンプル1

サンプル1

index.html


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Canvasのテスト</title>
<script type="text/javascript" src="paintcanvas.js"></script>
<script type="text/javascript">
  window.onload = function (){
     var c=document.querySelector('#canvas-id1');
     paintCanvas(c); // defined in external JavaScript file
  }
</script>


</head>
<body>
  <h1>Canvasのテスト</h1>
  <canvas id="canvas-id1" width="400" height="320">対応していないときに表示される文字列</canvas>
</body>
</html>

paintcanvas.js


function paintCanvas(c){
    var ct=c.getContext('2d'); // 決まり文句

// 色の指定
    ct.strokeStyle="#FF9999"; // 線の色
//    ct.strokeStyle="blue";  // 線の色
    ct.fillStyle="rgba(0,0,255,0.25)"; // 塗りの色


    ct.beginPath(); // Path を開始
    ct.moveTo(10,20); // 移動
    ct.lineTo(30,40); // 線分を描く
    ct.lineTo(60,50);

//    ct.closePath(); // Path の始点につなぐ
    ct.stroke(); // 線を描く
    ct.fill();	 // 塗る


    ct.beginPath();
    ct.arc(80,90,20,0,Math.PI*2.0/3,true); // 円弧を描く
    ct.stroke();

}

課題

  • Canvasで国旗を描こう

参考

このサイトのコンテンツ

QRcode to hig3.net

http://hig3.net