[目次]
Canvasの基本的な描画 | 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'); // 決まり文句
// 色の指定
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で国旗を描こう
参考
- 掌田津耶乃, HTML5 Webアプリケーションプログラミング入門
(第5章)
- 奥村晴彦先生 グラフを描く(canvas編)|JavaScript
