2019-09-01から1ヶ月間の記事一覧

[バイク] CB400SFで行く島根ツーリング! 出雲〜三瓶山〜仁摩編

ここ数年、お盆は暑すぎるので気温が落ち着いた10月前半ごろに帰省してるのですが、今年は仕事の関係で9月13〜19日の約一週間の日程で帰省しました。メインは生まれ故郷のツーリングスポット巡り。今回はバイクで帰省しなかったので現地でレンタルし、三瓶山…

[AWS] Node.js版 aws-sdkを設定する

Node.jsからAWSの様々なサービスを利用できるaws-sdkを使ってみます。 今回はインストールから利用開始できるまでの設定を行います。 AWS上の操作は大丈夫という方は、「Nodeから利用する」の項目からご覧ください。

[HTML5] Canvasでアニメーション

Canvasを利用して簡単なパラパラアニメを作成してみます。 原理としては授業中にノートや教科書の端に描いた絵をパラパラとめくって動かしたのと同じ。Canvasに描画したあとに適当な時間待機後、Canvasをお掃除したあとに少しだけ動かした絵を描画…をひたす…

[HTML5] Canvasに図形を描く - 三角形

Canavsに三角形を描画します。 HTML5では四角形と円、線以外を描画する専用のメソッドは用意されていませんので、線を組み合わせることで三角形などのの図形を描くことができます。

[HTML5] Canvasに図形を描く - 直線・曲線

Canavsに線を描画します。 ここでは純粋な直線と、曲線として円弧、ベジュ曲線を取り上げます。

[HTML5] Canvasに図形を描く - 円

Canavsに円を描画します。ここでは正円と、一部が欠けた円を取り上げます。

[HTML5] Canvasに図形を描く - 四角形

Canavsに四角形を描画します。また四角形で囲んだ領域をまるっとキレイに削除することも可能です。

[HTML5] Canvasにテキストを描く

Canvasにテキストを描画します。フォントや色なども自由に指定できます。

[HTML5] Canvasに画像を貼り付ける

HTML5のCanvas上に絵を描画することが可能ですが、さすがにすべてをプログラムで描画するのは現実的ではありません。というわけで今回はJPEGやPNGなどの画像を貼り付ける方法になります。 今回は「ゆるドラシル」のアセットを利用させていただきました。 yur…

[JavaScript] キーボードからの入力を取得する

今回はJavaScriptでキーボードの何らかのキーが押されたら、そのキーコードを取得する処理を取り上げます。 解説 キーコードを取得 結論から言うと以下のようにkeypress, keydown, keyupのいずれかのイベント処理で引数として渡されるオブジェクトのe.keyCod…