水玉を作ろう(1)

2020/07/24

canvas JavaScript 水玉

t f B! P L

ちょっと前の記事、



で、なんとか楽して面倒なアイキャッチ画像を簡単に作成できないものかをあれこれ検討しました。

結論は、お読みいただければわかるように、写真をそのまま載せるものだったり、ちょっとだけCanvaでいじるだけだったりと、しょうもないものでした。

なんとかリベンジをと考えていたのですが、このたび、抽象的な画像を作ればいいのではないか、と思いつきました。

水玉模様を作る

そこで、


というのを作ってみました。
これで作った画像にCanvaで文字を入れたものが、この記事の冒頭のアイキャッチ画像です。いかがでしょうか。

「水玉自動生成機(1色)」の使い方は簡単です。説明するまでもありません。でも、ちょっとだけ書いておきましょう。せっかくですから。

  1. 背景色を指定する
  2. 水玉の色を指定する
  3. 水玉の半径を指定する
  4. 水玉の数を指定する

そして、「水玉を作成」をクリックします。
すると水玉画面となります。右クリックして、「名前を付けて画像を保存……」をクリック。するとPNG画像で保存されます。

ブラウザを戻り、「リセット」をクリックすると初期設定に戻ります。いろいろな色で試してみると案外楽しいものです。我ながら、うっとりして水玉に眺め入ったりしています。

保存した画像は、Canvaで「背景」に設定して、適当な文字を入れればアイキャッチ画像となります。

このブログ冒頭のアイキャッチ画像ですが、Canvaの「図形」から「四角」を選択して、左右に帯のように延ばし、透明度を70%に設定しています。その上に文字の「テキスト」を載っけています。作成されたものは、760x428pxの大きさで、54.8KBでした。縮小する必要もありません。

ふふふ、これでいろいろな色の水玉ができますので、とりあえずしばらくはアイキャッチ画像に困ることはないでしょう。

まとめ

Canvaの「背景」を見てみると、もっときれいな水玉模様の背景がいろいろあることに気づきました。Canva恐るべし! ちょっとがっかりしましたが、オリジナルのものではありません。ぼろでも、自分だけの水玉を作る方が楽しくないでしょうか(負け惜しみ?)。

もちろん、作ったものは著作権フリーです。フリー画像です。(いばるほどのもの?)好きなように使用できます。どんどん作って、世界を水玉にしましょう!

参考文献

山下浩平『HTML5 Canvasプログラミング集中レッスン』Kindle版、2016

QooQ. Powered by Blogger.