こんにちはー。 前回、arc を使って描いた時、円が散らばらないようにする方法を紹介すると書いたので書きます。 まず、下の例を見てください。 うまくいかない例See the Pen Canvas Mousemove 円で描いてうまくいかない例 by shundroid (@shundroid) on CodePen. よくありがちなコンテンツです。mousemove のイベントが発生した時に円を描いているわけですが、めっちゃ速く動かして書くと、円と円の間が空いてしまいます。 今回は意外と初歩的なことかもしれませんが、この、間が空かないようにする方法を描きます。 moveToとlineToを … Read More

こんにちはー。題名のとおり、Canvas の「消す」機能で、丸などに形を変える方法を紹介します。 「消す」機能についてまずはじめに、消す方法としてのルールを書いておきます。 白く塗る はダメ！（背景が白でない場合があるため） 消した部分は透明になるようにする。 実装のポイントcontext の globalCompositeOperation を、destination-out に変更すると、fill や stroke で指定した領域を 切り取る ことができます。 また、このプロパティは、その他いろいろな値に変更できます。 サンプル：円形で消すglobalCompositeOperatio … Read More

こんにちはー。 非同期の処理をいい感じに使える js のライブラリないかなーと探していたら、Rx.js というのを見つけたので、それを使ったサンプル？を紹介します。 Rx.js とは？.NET 向けの Reactive Extensions を js 用に移植したもの。ぼくは、最初 .NET の方を使っていて、「それの js 版があったらいいな～」と思っていたらピンポイントであったという感じですー。 コードの概要では、今回書いてみるコードの概要を紹介します。 ３つの画像が配列になっている それらを非同期で読むが、１つ読み終わったら次を読むという条件。 １つ読み終わった後と全部読み終わった後に … Read More

まさにドンピシャでした！ありがとうございます！！ このようになっているコード。 `() => {` の、`>`の部分が見事に`>`になってしまうんです。 そんなときは、次のように書きましょう。 ポイントは、‘‘‘と書いていたところを、divタグとショートコードで書くところです。 これで解決！budougumiさんありがとうございます。 … Read More