01 <!DOCTYPE HTML>
02 <HTML>
03 <HEAD>
04 <TITLE>HTML 要素の属性値</TITLE>
05 <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
06 <META NAME=viewport CONTENT="width=device-width, initial-scale=1">
07 <LINK REL="stylesheet" TYPE="text/css" HREF="../master.css">
08 <SCRIPT TYPE="text/javascript">
09 function start() {
10 canvas = document.getElementById('canvas_e');
11 canvas.width = 600; // キャンバス要素の幅
12 canvas.height = 400; // キャンバス要素の高さ
13 ctx = canvas.getContext('2d');
14 let width = 40;
15 // 描画数の取得
16 let n = document.getElementById('no').value;
17 document.getElementById('no').style.display = "none";
18 // クリア
19 ctx.clearRect(0, 0, canvas.width, canvas.height);
20 // 位置の決定と描画
21 for (let i1 = 0; i1 < n; i1++) {
22 let x = width / 2 + Math.random() * (canvas.width - width);
23 let y = width / 2 + Math.random() * (canvas.height - width);
24 ctx.fillStyle = "rgb(0, 255, 0)";
25 ctx.beginPath();
26 ctx.arc(Math.floor(x), Math.floor(y), width/2, 0, 2*Math.PI, false);
27 ctx.fill();
28 }
29 }
30 </SCRIPT>
31 </HEAD>
32 <BODY CLASS="white" STYLE="text-align: center">
33 <H1>HTML 要素の属性値</H1>
34 <CANVAS ID="canvas_e" STYLE="background-color: #eeffee;" WIDTH="600" HEIGHT="400"></CANVAS><BR><BR>
35 描画数：<INPUT ID="no" STYLE="font-size: 90%" TYPE="text" VALUE="3" SIZE="2"></INPUT>
36 <BUTTON STYLE="font-size: 90%" onClick="start()">スタート</BUTTON>
37 </BODY>
38 </HTML>