JavaScript
p5.jsでテキストを使う時、最初のころはフォントは気にしないですよね。 どんなデザインで、どんな動きをさせるのかを考えたり、Referenceを見ながら悩むことに時間を使います。けど、p5.jsに慣れてくると好きなフォントを使いたくなってきます。 フォントを…
Canvasで何かを作って残しておくのはむつかしいです。 特に、アニメーションだったり、マウスに反応するものだったりするとむつかしい。 JavaScriptのコードをWebサイトにして残しておけばいいのですが、面倒です。 簡単な作業でブログに残したい。 CodePen…
Canvas（JavaScript）をいじっていると、たまに良いのができる。 そんなときは画像に残したい。 今まではHTMLでbuttonタグを作って、ボタンをクリックしてダウンロードしていました。 yuuuha.hatenablog.com キーを押してダウンロードする しかし、マウスを…
JavaScriptのCanvasを勉強中です。 今回はテキスト（文字）を入れる方法を確認します。 テキストを使う方法 テキストを入れる場合は、「ctx.font」を使います。 ctx.font = '60px serif' テキストの色の設定 色の設定は図形などと同じです。 ctx.fillStyle =…
JavaScriptのCanvasで円を並べてみました。 円を並べることは、横幅・縦幅の感覚などいろいろ理解できるので、基本としていいかなと思っています。 今回はforで円をつくり、それを割り算の商と余で縦と横に並べる方法を使っています。 このやり方は書籍「Des…
JavaScriptのCanvasで画像を制作したあと、もちろん画像をダウンロードしたくなります。私もダンロードをしようとしました。しかし、情報が少なくてダウンロードができませんでした。そこで調べてみました。 ダウンロード方法 いろいろ調べてみて、やっとダ…
JavaScriptのCanvasも少し勉強しています。JavaScriptを理解したい、GenerativeArtをしたい、という気分にちょうど良いのがCanvasなんです。 Canvasで最初に戸惑ったのがaddEventListenerで使うMouseEventでした。 MouseEvent MouseEventは種類が多いイメー…
JavaScriptのclassは2種類ある？ 初心者には5種類くらいあるように感じて難しいです。 おそらく2種類で新しいのとES2015以前のですよね？ 書籍やブログ記事を見ていると古いほうを使っていることが多いので、本当にわかりません。。 最近のclass 最近のclass…
