こんにちはー。 前回、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