Canvasに点を描く

ページ上にJavaScriptを用いて点を描画します。

ここでも、やはり、Canvasを使用します。

(注)Canvasの詳しい説明は、記事「Canvasに長方形を描く」をご参照ください。

 

点の描画は、以下の手順となります。

  1. canvasを設定する
  2. canvas上に点を描画する

 

しかし、Canvasには「canvas上に点を描画する」関数はありません。

ここでは、「点」を「最小サイズの長方形」とみなして、点を描画します。

  • 点を描画する関数はない。
  • 「点」は、「最小サイズの長方形」とみなす。

(注)最小サイズ:横幅1pixel×高さ1pixel

 

「点」を「最小サイズの長方形」とみなすことで、簡単に「点」を描画し消去できます。

 

 

プログラム

 

機能

  • [draw]ボタンをクリックすると、Canvasの座標(100, 50)にオレンジ色の点を描画
  • [clear]ボタンをクリックすると、Canvasの座標(100, 50)のオレンジ色の点を消去

 

上記プログラムは、記事「Canvasに長方形を描く2」のプログラム3とほぼ同じです。

プログラムの詳しい説明は、記事「Canvasに長方形を描く2」をご覧ください。

 

プログラムの修正点は以下の通りです。

  • 5行目、title要素を、Draw Rectangleから、Draw Pointに修正
  • コメント欄、「長方形」を「点」に修正
  • 10行目、点の横幅wを、1に設定
  • 11行目、点の高さhを、1に設定

 

 

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。