FC2ブログ

HTML5:<canvas>要素

2013-11-24 :  PCクリニック
WebGL については、
昨日(2013-11-23)の記事:
SceneJS : extensible WebGL-based engine
でも書いたが、
10件程度記事にしている

ふとしたことで、
こんな記事を見つけた。
<canvas>タグで図形を描く
これは、「HTML5リファレンス」の中の1ページ。

曰く、
   今までウェブページ上で図形を描くには、
  PNG・ JPEG・ GIFなどの画像に置き換えるか、
  Flash などのプラグインデータを埋め込むのが一般的でした。
   HTML5では、2Dのグラフィックスを描く、
  <canvas>要素が新たに追加されています。
  <canvas>を使用することで、標準のHTMLとJavaScriptだけで、
  グラフやゲームグラフィックスなどの図形を
  すばやく表示できるようになります。
   HTMLの部分は大変シンプルです。
  ・・・・・

<紙>は、HTML5 の canvas は、
「WebGL」の様な3Dグラフ(画像)用のモノだと思っていた。

なんと、2Dのグラフも(?)描けるのだ。
(こっちが先なのかナ?)


このページでは、
  ・・・・・
  ■四角形・円などの図形を描く
   上記をふまえて様々な図形を描いてみましょう。
  ・・・・・
  ・・・・・
   上のサンプルでは、塗りつぶしの四角形・枠線の四角形(青)・
  塗りつぶしの半円(赤)を描いています。
  図形を描くのに使用したのは、fillRect()メソッド・
  strokeRect()メソッド・arc()メソッド・fill()メソッドです。
   図形の色を特に指定しない場合には、
  一般的なブラウザでは黒になりますが、
  上のサンプルでは、strokeStyle属性・fillStyle属性を使用して、
  枠線の色を青く、塗りつぶしの色を赤く指定しています。
  今回は使用しませんでしたが、canvasでは他にも半透明・
  グラデーション・影・図形や画像の変形などの指定が可能です。
   <canvas>要素の幅と高さは、width属性とheight属性で指定する
  ことができますが、特に指定しない場合の初期値は300×150となります。
  キャンバスの背景をCSSのbackground-color:yellow;の指定で
  黄色くしていますが、これはキャンバスのサイズを分かりやすくするためです。
  ・・・・・

と、例が載っている。

早速、コピー&ペーストして
HTML文書を作ってみた、・・・

(常用の)Firefoxでは当然、
SeaMonkey」でも表示された。
家(IE)では、
  図形を表示するには、canvasタグをサポートしたブラウザが必要です。
となった。


このページの1段上、
HTML5リファレンス」ページの
最後に、
  「HTML5の概説」
がある。
当記事の最初に書いたページは、この中の6番目の項目。

そして、そのページの最後には、

  ■<canvas>は適切に使う
   HTML5の仕様では、より適切な要素がある場合には、
  <canvas>を使うべきではないとされています。
  例えば、ページの見出しに<canvas>を使うのは不適切です。
  見出しを装飾する場合には、>h1<などの適切な要素を使用した上で
  CSSでスタイリングするべきでしょう。

  ■関連項目
   Canvasリファレンス
  ・・・・・

とある。

2次元のグラフ(折れ線)が描けるゾ。
「canvas」について学習してみようかナ???


お粗末でした。


見ていただいた序でとは厚かましい限りですが、
お帰りに投票して頂けるとなお嬉しいです。 ⇒ blogram投票ボタン


131122
関連記事
スポンサーサイト



コメントの投稿

管理者にだけ表示を許可する

人気blog Ranking



最新記事
カレンダー
06 | 2021/07 | 08
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
月別アーカイブ
カテゴリ
最新コメント
検索フォーム
リンク
プロフィール

<紙>

Author:<紙>
ようこそ。
「パソコンヲタクの雑記帳」
もろもろなことを綴っています。
パソコン ヲタクってねくら?
画像は kami でなく kani です。

FC2 / i2i / Google




Google Analytics
ブックマーク