1.

Canvas API

▶
編集
ページの作成
テンプレートを更新

ページの作成

親となるページを選択してください。

ページは必ず何かしらの親ページに紐づきます。
親ページに紐づくページを子ページといいます。
例： 親=スポーツ, 子1=サッカー, 子2=野球

子ページを親ページとして更に子ページを作成することも可能です。
例： 親=サッカー, 子=サッカーのルール

親ページはいつでも変更することが可能なのでとりあえず作ってみましょう！

Canvasとは、HTML5から新しく追加された図形を描くための技術仕様で、

HTMLの<canvas>要素とJavaScriptを組み合わせて図形を描画する。

 

 <canvas>を使用することで、標準のHTMLとJavaScriptだけで、

グラフやゲームグラフィックスなどの図形を表示できるようになる。

 

利用例）

【HTML】

<canvas id="example" width="150" height="150">

HTML5のCanvas要素に対応していないブラウザの場合、この文章が表示される。

</canvas>

・HTMLで、<Canvas>要素の幅と高さ、および、id名を指定。

 

【javasclipt】

var example = document.getElementById('example');

var context = example.getContext('2d');

context.fillStyle = "rgb(0,0,255)";

context.fillRect(30, 30, 50, 50);

・getElementByIdメソッドでHTMLと関連付けて、getContextメソッドで描画機能を有効にする。

・canvasAPIの仕様で定められたメソッドやプロパティを使用し、※具体的な描画内容を指定。

※項目を参照

 

編集
ページの作成
テンプレートを更新

ページの作成

親となるページを選択してください。

ページは必ず何かしらの親ページに紐づきます。
親ページに紐づくページを子ページといいます。
例： 親=スポーツ, 子1=サッカー, 子2=野球

子ページを親ページとして更に子ページを作成することも可能です。
例： 親=サッカー, 子=サッカーのルール

親ページはいつでも変更することが可能なのでとりあえず作ってみましょう！
子ページ
  1. 図形
  2. 色
  3. 直線・曲線(パスでの描画)
同階層のページ
  1. Canvas API
  2. Drag and Drop API
  3. History API
  4. WebStorage API
  5. File API
  6. System Information API

人気ページ

最近更新/作成されたページ