配列の宣言と定義 | Webプログラミング!(0000年度)

Time-stamp: "2013-02-04 Mon 22:11 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'); // 決まり文句

    for(var j=0;j<5;j++){
	quadrangle(j*10,j*30+10,2);
    }

    function quadrangle(x,y,scale){
	var pts=[[20,20],[50,30],[30,10]]; //配列の宣言と定義

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

	ct.beginPath(); // Path を開始
	ct.moveTo(x,y) ; 
	for(var i=0; i<pts.length; i++){
	    ct.lineTo(x+pts[i][0]*scale,y+pts[i][1]*scale); // 配列の要素
	}
	//    ct.closePath(); // Path の始点につなぐ
	ct.stroke(); // 線を描く
	ct.fill();	 // 塗る
    }

}

参考

このサイトのコンテンツ

QRcode to hig3.net

http://hig3.net