JavaScript関連のことを調べてみた2020年12月02日

【入門者向け】Canvas入門講座#18 canvasに描いた内容を保存、復元してみよう【JavaScript】

#問題18

クリックした座標を中心に四角形を描画しなさい。
四角形は赤色(#ff0000)で塗りつぶすこと。
四角形は1辺の長さが30の正方形とする。
saveボタン押下で描画内容をlocalStorageへ保存すること
loadボタン押下でlocalStorageから復元すること

以下のHTMLを使用すること。

“`html

【入門者向け】Canvas入門講座#17 マウスクリックで四角形を作成してみよう【JavaScript】

#問題17

クリックした座標を中心に四角形を描画しなさい。
四角形は赤色(#ff0000)で塗りつぶすこと。
四角形は1辺の長さが30の正方形とする。

以下のHTMLを使用すること。

“`html












“`

#解答

“`html

【入門者向け】Canvas入門講座#16 マウスドラッグで線を引いてみよう【JavaScript】

#問題16

マウスダウンで線の描画を開始し
マウスムーブで線を描画し
マウスアップで線の描画を終えるようにしなさい。
canvasの外にカーソルが出た場合も線の描画を終えること。

線の太さは3で色は#000000であること。

以下のHTMLを使用すること。

“`html







```

を`

月齢と月の満ち欠けを表示

JavaScriptで簡易的な月齢の計算及び月の満ち欠け表示を作成してみました。


**[動作デモ](https://akebi.jp/temp/moonage/)**

日時及び[平均朔望月](https://ja.wikipedia.org/wiki/%E6%9C%94%E6%9C%9B%E6%9C%88#%E5%B9%B3%E5%9D%87%E6%9C%94%E6%9C%9B%E6%9C%88)からおおよその月齢を出し、月齢に応じた満ち欠けをcanvasを使用して描画しています。

満ち欠けの状態に応じた形をその都度描いているわけではなく、新月(暗 真円)、上弦及び下弦(明 半円)、リサイズ用真円(明暗切替)の3枚を重ね合わせて、CSSで反転や変形させることで表現しています。
言葉では伝わりにくいかと思いますが、こちらの[満ち欠けテスト

12月なのでクリスマスソングにノるテンアゲなキーボードliteを実装！【WebHID API】 #iotlt

この記事は[IoTLTアドベントカレンダー1日目](https://qiita.com/advent-calendar/2020/iotlt)です！（先に断っておきますが自作キーボード話ではないです） 先日のIoTLT vol69で話したネタをアップデートした感じです。
関係ないけどついに、この季節がやってきましたか〜 2020年めち

> IoTLT vol69 https://iotlt.connpass.com/event/192582/

## テンション爆上がりなキーボードがこちら

クリスマスソングに合わせてキーボードを光らせる! #iotlt の 地理院タイルとdeck.glで3D地図をつくろう

この記事は[MIERUNEアドベントカレンダー](https://qiita.com/advent-calendar/2020/mierune)2日目の記事です！

1日目は最近弊社にジョインした@igarashiさんが[FOSS4GHokkaidoでの登壇](https://docs.google.com/presentation/d/e/2PACX-1vQRyhbW_jbsu7B0Xuta61O5jWLUAbMqbiakdIFflXJlFFkUSxnelSaMixwTW2SADlrcS2k6hrYQdW8G/pub?start=false&loop=false&delayms=3000&slide=id.g953cd9280a_0_0)から引き続き、とてもアツい記事を投稿されましたのでMIERUNE的なインパクトは十分、2日目はゆるふわに富士山でも見て涼んでいきましょう。

## TL;

元記事を表示

Vue.jsで超簡単なタイピングゲームを作ります

#完成品
***

```vuejs:App.vue