情報学部 | 菅沼ホーム | JavaScript 目次 | 基礎技術目次 | 索引 |
01 <!DOCTYPE HTML> 02 <HTML> 03 <HEAD> 04 <TITLE>図形の描画</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 draw() { 10 let canvas = document.getElementById('canvas_e'); 11 canvas.width = 270; // キャンバス要素の幅 12 canvas.height = 130; // キャンバス要素の高さ 13 let ctx = canvas.getContext('2d'); 14 // 矩形(左) 15 ctx.lineWidth = 5; 16 ctx.beginPath(); 17 ctx.strokeRect(20, 15, 100, 100); 18 ctx.stroke(); 19 // 塗りつぶした円 20 ctx.beginPath(); 21 ctx.fillStyle = "rgb(0, 255, 0)"; 22 ctx.arc(70, 65, 40, 0, 2*Math.PI, false); 23 ctx.fill(); 24 // 矩形(右) 25 ctx.strokeStyle = "rgb(255, 0, 0)"; 26 ctx.beginPath(); 27 ctx.strokeRect(150, 15, 100, 100); 28 ctx.stroke(); 29 } 30 </SCRIPT> 31 </HEAD> 32 <BODY CLASS="white" STYLE="text-align: center" onLoad="draw()"> 33 <H1>図形の描画</H1> 34 <CANVAS ID="canvas_e" STYLE="background-color: #eeffee;" WIDTH="270" HEIGHT="130"></CANVAS> 35 </BODY> 36 </HTML>
let x1 = 12345; let x2; var y1 = 12.5; var y1; z1 = 12; z1;
function 関数名 (引数, ・・・) { 処理 }
01 <!DOCTYPE HTML> 02 <HTML> 03 <HEAD> 04 <TITLE>図形の描画</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 draw() { 10 let canvas = document.getElementById('canvas_e'); 11 canvas.width = 390; // キャンバス要素の幅 12 canvas.height = 130; // キャンバス要素の高さ 13 let ctx = canvas.getContext('2d'); 14 // 塗りつぶした矩形(左) 15 ctx.fillStyle = "rgb(0, 255, 0)"; 16 ctx.fillRect(20, 15, 100, 100); 17 // 楕円 18 ctx.beginPath(); 19 ctx.setTransform(1, 0, 0, 0.5, 0, 0); 20 ctx.lineWidth = 5; 21 ctx.strokeStyle = "rgb(255, 0, 0)"; 22 ctx.arc(190, 130, 50, 0, 2*Math.PI, false); 23 ctx.stroke(); 24 // 三角形(右) 25 ctx.beginPath(); 26 ctx.fillStyle = "rgb(0, 0, 0)"; 27 ctx.setTransform(1, 0, 0, 1, 0, 0) 28 ctx.moveTo(270, 115); 29 ctx.lineTo(370, 115); 30 ctx.lineTo(320, 15); 31 ctx.closePath(); 32 ctx.fill(); 33 } 34 </SCRIPT> 35 </HEAD> 36 <BODY CLASS="white" STYLE="text-align: center" onLoad="draw()"> 37 <H1>図形の描画</H1> 38 <CANVAS ID="canvas_e" STYLE="background-color: #eeffee;" WIDTH="390" HEIGHT="130"></CANVAS> 39 </BODY> 40 </HTML>
情報学部 | 菅沼ホーム | JavaScript 目次 | 基礎技術目次 | 索引 |