IT系女子ログ

Webデザイナーのエッセイ。デザイン、コーディングで気になることをあれこれ考える。

canvas勉強メモ

2017年にやりたかったことの1つでcanvasの勉強がありました。 2018年も間近なので現状を残しておきます。

まだまだ無作為に勉強中であまり理解できていないことと、 PCが不調でうまく記事作成できないため、なぐりがき状態です。 内容もまとまっておらず自分しかわからないと思いますが悪しからず。

もう少し理解できるようになったら別の機会にまとめます。

こんなことしたい

実現したかった動きの参考イメージです。 f:id:tosssaurus:20171224213415j:plain Designed by Freepik

ピンク、紫、青、緑、黄と色が変化するベクター曲線が何本も連なっていて、なめらかに動く。 できれば線の重なりの量にに応じて色が濃くなるようにもしたい。 できれば色が濃くなる箇所は波の内側より外側に集中させたい。

現在できたのはここまで。

実はICS MEDIAさんのものほぼそのままです…。 canvasでググっていたらたどり着いたCreateJS入門に近い表現があるのを見て、「いけるんじゃないか」と思ったのもつかの間、コードが分からない…。 もっとコードの理解が必要だなぁと思いました。 結局カラーの変更くらいしかできていないです…。 CreateJS入門サイト - ICS MEDIA

色の変化はこちらが参考になりそうですが、同じように、まだまだコードが分からずどこを調整すれば思っている動きに近づくかが分からない。

CreateJSの勉強に。 CreateJS勉強会を生中継 https://blogs.adobe.com/creativestation/ccdojo-192-createjs

どういうコードを書けばどういう表現ができるかを、まずはcanvasから勉強して、CreateJSを勉強し始めるのはその後にしようと思っています。