CANVASCANVASの基本(2)図形描画の基本機能canvasの概念およびピクセル情報に関しては、「CANVASの基本(1)」で扱いましたが、実際の図形描画では、標準装備されている機能を使うことが必要です。ここでは、代表的な機能を列挙します。基本図形[実行]をクリックしてください。この直後に、幅400ピクセル、高さ200ピクセルのCANVAS「canvas1」が定義されています。height="200"></canvas>これらの図形を描画するJavascriptを以下に示します。・・・F}AとBは、body部で記述した<canvs~>とJavascriptを結び付ける機能です。「CANVASの基本(1)」で示したので割愛します。以下の図形描画でのこの2行が必要ですが、割愛しています。ここでは、CANVASの外枠(長方形)を描画しています。Cで長方形を定義し、Fで描画をします。ないことに注意Dは線の色、Eは線の太さ(ピクセル単位)です。これらの指定は、後続する図形描画にも引き継がれるので、その都度指定するほうが安全です。個々の図形で与えずに、最後に記述して全体を一挙に描画することもできます。5;ctx.stroke();線を引くときには、GとJで囲みます。Hで起点、Iで終点を与えて直線を引きます。・・・PKが起点となり、Lを終点とする直線が引かれますが、このときポインタはLになっています。それで、Mを与えると、LからMへ直線が引かれます。並べることにより、多様な折れ線を引くことができます。すると、最初の起点Kに直線が引かれ多角形になります。加えればより明確になりますが、それを省略できるのです。OとPで、多角形の内部に色をつけています。Pがないと色が表示できません。endAngle:円弧の開始角度と終了角度X軸(横軸)の正方向(右端)から「時計回り」にラジアンで与えます。上のラジアンは正負が逆になります。・・・TRとSで取り込む画像のURLを定義し、Tで表示位置を指定して表示します。