結果を表示する
元にもどす
◀︎
15
▶︎
<html lang="ja"> <meta charset="utf-8"> <canvas id="目印"width="300"height="300"></canvas> <script> let きゃんばす=document.getElementById("目印"); let こんてきすと=きゃんばす.getContext("2d"); こんてきすと.beginPath(); こんてきすと.fillStyle="#facebc"; こんてきすと.fillRect(0,0,きゃんばす.width,きゃんばす.height); こんてきすと.beginPath(); こんてきすと.fillStyle="#1e99ff"; こんてきすと.moveTo(50,10); こんてきすと.lineTo(10,100); こんてきすと.lineTo(300,150); こんてきすと.closePath(); こんてきすと.fill(); こんてきすと.clearRect(150,20,50,280); </script> <br><hr> <pre style="color:green;"> <span style="color:black;font-size:16px;">きゃんばす.width,きゃんばす.height</span> は canvas タグの attribute に書かれた値 つまり, width="300"height="300" となる <span style="color:black;font-size:16px;">clearRect</span> は canvas 上の領域を消去 するためのメソッド <span style="color:black;font-size:16px;">clearRect(x, y, width, height)</span> は指定した四角形の領域を消去する </pre> </html>
◀︎ 15 ▶︎