JavaScript

Javascriptという筆で図形を描画!

canvas APIを用いた描画の基礎的な知識が身につきます

事前準備

この問題ではJavascriptのcanvas APIを用いて絵を描画していきます。
このAPIは訪問者に対応したグラフなどを描きたい場合に便利です。


まずは以下のファイルを用意してください。


このAPIを用いる際にはcanvas要素を使いますが、ブラウザとそのバージョンによってはこれがサポートされていない可能性があります。
もしcanvas要素に対応していないブラウザであれば canvas要素に対応していないブラウザです。と表示されます
もし対応していないブラウザであれば他のブラウザを利用してみてください。
対応していればグレーのcanvas要素が出現します


canvas.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>canvasAPIで絵を描く</title>
    <style>
      h1 {
        text-align: center;
      }
      canvas {
        background-color: #eee;
        display: block;
        margin: 0 auto;
        width: 50%;
      }
    </style>
    <script>
    function canvas() {
      var canvas = document.getElementById('sample');
      var context = canvas.getContext('2d');

//描く形状の内側の色を指定 context.fillStyle = 'rgb(100,100,100)'; //canvas要素に(左から160,上から80,幅100,高さ60の)矩形を指定した色で描く context.fillRect(160,80,100,60); } </script> </head> <body onLoad="canvas()"> <h1>canvas APIで絵を描く</h1> <canvas id="sample"> canvas要素に対応していないブラウザです。 </canvas> </body> </html>

問題: 1


ファイルにコードを書き加え、以下の指定通りに画像のような長方形の枠線を描いてください


指定
・canvas要素の左から30、上から30の座標位置にあり、幅80、高さ50
・枠線の色がrgb(100,100,100)


ヒント
用意したファイルの以下の記述を参考にしながら問題をときましょう。
fillStyleやfillRectは内側を塗りつぶす図形を描くときに用います。
枠線のみであればstrokeStyleやstrokeRectを用います。


      //描く形状の内側の色を指定
      context.fillStyle = 'rgb(100,100,100)';
      //canvas要素に(左から160,上から80,幅100,高さ60の)矩形を指定した色で描く
      context.fillRect(160,80,100,60);

https://tech-drill.s3.amazonaws.com/uploads/questions/images/9ee89ca735b8f53444f437c7332403f5.png

問題: 2


ファイルにコードを書き加え、以下の指定通りに画像のような一部が欠けた黄色い円を描いてください


指定
・円の中心はcanvas要素の左から45、上から110の座標位置
・半径は20
・45°から325°まで描かれた円
・色がrgb(255,255,0)


ヒント
・context.arc(x座標,y座標,半径,開始角度,終了角度,反時計回りかどうか)で円を描けます、詳しくは調べてみてください。
45°325°は円周率を表すMath.PIを用いてそれぞれMath.PI*1.25Math.PI*0.25と表せます
・context.moveTo();を用いて半円を2つ描けば簡単に描けます


https://tech-drill.s3.amazonaws.com/uploads/questions/images/87cd72df30a7277e1f0d314b193c5a8c.png

問題: 3


ファイルにコードを書き加え、以下の指定通りに画像のような小さな正方形を9つ描いてください


指定
・最も左にある正方形がcanvas要素の左から60、上から108の座標位置にあり、横幅・高さ共に4
・色がrgb(140,140,140)
・最も左側にある正方形からx座標を右側に10ずつずらしていく


ヒント
繰り返し処理を用いるとすっきり書けます!


https://tech-drill.s3.amazonaws.com/uploads/questions/images/a954f9efb5e98ea85d615a3e7459f771.png


問題は以上になります!!
お疲れ様でした!