システムちーむ入門JavaScriptHTML5おはようこんにちはこんばんは。最近はゲームの世界で王様を玉座に戻すためにあちこち冒険してます。表示する場所がないとできないのでまずそれを用意します。style="background-color:yellow;"></canvas></div></body></html>上記のような前回までの物をちょっと改良した物を用意して下さい。Canvasタグが使われているけど、これは何かを描くための場所を用意しているだけです。例えるならスケッチブックの1ページをここに用意した。いう感じですね(`・ω・)表示するとこんな感じになります。黄色い四角ができました!タグの属性に”style”をいれて、指定した領域の色を変更しています。用意した領域の色を変えてわかりやすくしています。それではこの黄色い四角の中にCanvasで図形を描いていきましょう!長方形を描く!まずは長方形を作ってみます。先程作成したファイルの<head>から</head>の間に下記コードを追加して下さい。図形を描く領域がどこなのかを指定しています。下記のように変更してみて下さい。変数を用意しています。作っているのですが、ちょっと難しい...『、』で区切られた左から2つ目までが中心位置、3つ目が半径、4つ目が弧を描き始める位置で、5つ目が終了位置、6つ目が弧を描く向きです。ここまでの内容で描いてねっていう命令がないと表示されないので注意です(・д・`)では次に、円に中心点を付けてみましょう。円に中心点をつけてみます。小さな円の中を塗りつぶす形で作成します。先程のコードを下記内容に変更してみて下さい。中が塗りつぶされたものができます。意外と簡単!では次に、この円の中心から線を引いて四角の周りを1週してみましょう。直線・曲線を描く!それでは、先程のコードを下記のように変更してみて下さい。最後の一本をコメントアウトしています。表示して確認してみましょう!円の中心から線が引かれ、角が丸くなる形でぐるーっとしています。一筆書きみたいな感じで線が引かれていますね(・д・`)簡単に説明すると下記のような感じです。この地点から次の地点まで移動しつつ書いてねという命令。この地点まで線を引いてねという命令。100)の地点まで曲線を引いてねという命令です。長方形の周りを囲うようにしています。コメントアウトして表示確認することで流れがよくわかるかと思います。紙に図を描いて、各箇所の座標を計算して書いてみるのも良いかと思います。(みたらしは自分で図を描いて長さを計算していました。́)今回は上記画像のような図形を作ってみました。英語力の無さを実感したみたらしでした。スマホサイト制作にかかせないbackground-sizeについて5簡単作成!オリジナルのイラストなどのデザインQRコードを作ってみた。QlikSense(Qli2015.08.03第二種電気工事士への道【その2】2014.12.24USB2.0とUSB3.0の見分け方(色、ケーブル、形などで2016.05.16bashでディレクトリを掘ったあと中に移動する2018.01.10Nginxでデバック用のログを出力する方法2016.04.14インフラ系女子、モニターを修理してみた。~修理にいたるまで~2015.12.07第二種電気工事士への道~衝撃の結末へ~2014.07.21ほんのり解説Linux。3選2017.02.26持っているけど見えない才能ほど素晴らしい2016.06.14興奮してます!~メタボ編~2016.09.16五反田で美味しいラーメン(つけ麺)屋【私的TOP3】2016.12.11佐賀を探そう!元佐賀県民だからこそ見つけたい、東京で佐賀を満2016.03.14元テスターが思うテスト業務に必要な3つの心得2015.06.12仕事のミスを防ぐためには、確認作業は怠らないようにしましょう2016.05.24デスクが綺麗な人って...!デスク周りから見る性格が面白い!2015.02.09センスがある人とはどういうことか...センスは育てたもん勝ち!2015.02.20SEOちーむ:採用情報2016.03.21社会人経験0の私がGo-Nextに入社を決めたワケ2015.02.02寿退職でGo-Nextを卒業します!2014.12.15Webエンジニア1年目を終えて~こんな僕でもやってこれた~2014.05.04Go-Nextブログ、始めます!2015.02.20デザインちーむ:採用情報2019.07.26現在リニューアル中。多忙につきお待たせしております。