こんにちは、ススムです。
JavaScriptのCanvasとは何なのか？
そんな方向けの記事内容となります。
この記事を書いた人はこんな感じです。⇩
著者
- スポーツの専門学校卒業
- オーストラリアへ語学留学/スシレストランで就労
- JICA海外協力隊にてミャンマーで2年間生活
- Webデザイナー/動画クリエイター/Webエンジニア/Webライター
- オンラインスポーツコーチ
- オンライン日本語講師
- オンラインミャンマー語講師
- ミャンマー人向けオンラインコミュニティ運営
※この記事を書いている私について詳しくはこちらで紹介しています。
本記事の内容
・JavaScriptのCanvasとは
【エンジニアの職探しならこちら🔻】
フリーランスエンジニアに安心保証と豊富な案件紹介を【midworks】
JavaScriptのCanvasについて
canvasとはHTML5から追加され、図形を書いたり、動かす事もでき、ゲーム開発やアニメーションなどに利用されています。
書き方としては、HTMLにcanvas要素を配置します。
javascriptからcanvasにアクセスできるようになりました。
getContextメソッドでは、描画機能を有効にする役割があります。 ここで指定できる引数は「2d」だけです。
図形の作成
それでは実際に四角形を書いてみます。
strokeRect()は輪郭線だけで、fillRect()はぬりつぶしでかけます。
()内の値は、(左、上、幅、高さ)という意味です。
続いてはアニメーションのやり方を書いていきます。
requestAnimationFrame()を利用します。
横にスライドしていくアニメーションになりました。 clearRect()は四角形の形にクリアします。
イベントの実装
ではcanvas要素をクリックした時のイベント処理を書いていきます。
clientXプロパティからクリックした時のマウスX座標を取得し、clientYプロパティからY 座標も取得します。
ライブラリ/Graphics.js
Graphics.jsは仮想DOMなどを利用した高速な動作が可能でSVG形式で画面に出力することも可能です。
まずはGraphics.jsを読み込みました。
続いてHTMLとCSSの記述をしました。
acgraph.create()の引数にはHTMLで記述したdiv要素のID属性名を設定します。
それでは、四角形を書いていきます。
Graphis.jsはrect()メソッド1つで書く事ができます。
プログラミング学習ツール
https://prog-8.com/languages
https://dotinstall.com/
私は、エンジニアの学習にあたってこちらの資料を参考にしました。
http://www5e.biglobe.ne.jp/aji/3min
https://ping-t.com/
【エンジニアの職探しならこちら🔻】
フリーランスエンジニアに安心保証と豊富な案件紹介を【midworks】
【IT・プログラミング関連記事】
また、何かあったら紹介したいと思います。
質問などがあれば気軽にコメント下さい。
仕事の依頼などがあればメールまたはSNSにてお問い合わせ下さい。
以上が今回のブログとなります。
読んで頂きありがとうございます。
また次回お会いしましょう。
※0円で受けれるプログラミング説明会
今話題のテックキャンプ。
実績、知名度ともに業界最大級の未経験を対象としたテクノロジースクールです。 受講期間中はいつでもメンター(講師)に質問ができ、目的達成のためにトレーナーが徹底的にサポートします。
【ミャンマー写真集】
【ミャンマー語学習教材３選】
※ミャンマー語のテスト問題集作成しました。詳しくはこちらから
※ミャンマースポーツコミュニティ⏩【Myanmar Sports/ISPE】
※ミャンマー✖️日本コミュニティー⏩【MyanJapa Life】
企業の方、プレスの方、個人の方など、仕事の依頼に関するお問い合わせは以下の
フォームからお気軽にご連絡下さい
コメント