<!DOCTYPE html>
<html>
<head>
<meta sharset="UTF-8" />
<title>図形を描画する</title>
<style>
canvas{
background-color:navy;
}
</style>
</head>
<body onload="draw()">
<h1>図形を描く</h1>
<canvas id="region" width="400" height="400"></canvas>
<!--HTML5の描画領域を指定-->
<script>
function draw() {
//関数drawを定義
//キャンバス「kami」を定め、kamiは2次元の領域であることを定めた
var kami = document.getElementById("region");//対象のキャンバス指定
var kaku = kami.getContext("2d");//kakuはキャンバスの2次元領域
kaku.lineWidth="8";
kaku.lineCap = "butt";
kaku.lineCap ="round";
// X座標（横方向）とY座標（縦方向）
//三角形パスが開いている図形
kaku.moveTo(20,50);
kaku.lineTo(200,50);
kaku.lineTo(200,150);
//三角形のパスを閉じた図形
kaku.moveTo(250,50);
kaku.lineTo(350,50);
kaku.lineTo(350,150);
kaku.closePath();
// 円を描く
kaku.arc(200,300,50,0,360*Math.PI/180);
//四角形
kaku.moveTo(20,280);
kaku.lineTo(150,280);
kaku.lineTo(180,370);
kaku.lineTo(70,370);
kaku.closePath();
//不定形（5角形）
kaku.moveTo(250,200);
kaku.lineTo(350,320);
kaku.lineTo(300,300);
kaku.lineTo(300,200);
kaku.lineTo(250,300);
kaku.closePath();
//四角を1行で描く
kaku.strokeRect(5,5,40,40);
//四角に色を付ける
kaku.strokeStyle = 'white';
kaku.fillStyle= 'yellow';
kaku.strokeRect(40,20,50,50);
kaku.fillRect(5,80,50,50);
kaku.stroke();//ここで描画を行う
}
</script>
</body>
</html>
パソコン操作
コメント