[目次]
配列の宣言と定義 | Webプログラミング!(2021年度)
Pathによる基本的な描画
- canvas要素
- 塗りと線
- Path
- 色の指定
- moveTo, lineTo, arc
サンプル1
サンプル1index.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(); // 塗る
}
}参考
- 掌田津耶乃, HTML5 Webアプリケーションプログラミング入門
(第5章)
- 奥村晴彦先生 グラフを描く(canvas編)|JavaScript
