結果を表示する
元にもどす
◀︎
13
▶︎
<html lang="ja"> <meta charset="utf-8"> <canvas id="目印" width="300" height="300" style="border:2px dotted red;"></canvas> <script> let きゃんばす=document.getElementById("目印"); let こんてきすと=きゃんばす.getContext("2d"); こんてきすと.beginPath(); こんてきすと.lineWidth=2; こんてきすと.strokeStyle="red"; こんてきすと.moveTo(60,140); こんてきすと.lineTo(150,40); こんてきすと.lineTo(240,140); こんてきすと.closePath(); こんてきすと.fillStyle ="black"; こんてきすと.fill(); こんてきすと.stroke(); こんてきすと.lineWidth=10; こんてきすと.fillStyle="silver"; こんてきすと.strokeStyle="blue"; こんてきすと.fillRect(80,160,140,100); こんてきすと.strokeRect(80,160,140,100); </script> <hr> <pre style="color:green;"> 三角形(屋根部分)を前面に出すには <span style="color:black;font-size:16px;">四角形 (strokeRect)</span> よりも後に記述する. </pre> </html>
◀︎ 13 ▶︎