【Canvas】mousemoveのタイミングで円を描くときに円が離れてしまう問題

2016-04-18

TOC

こんにちはー。

前回、arc を使って描いた時、円が散らばらないようにする方法を紹介すると書いたので書きます。

まず、下の例を見てください。

うまくいかない例

よくありがちなコンテンツです。
mousemove のイベントが発生した時に円を描いているわけですが、
めっちゃ速く動かして書くと、円と円の間が空いてしまいます。

今回は意外と初歩的なことかもしれませんが、
この、間が空かないようにする方法を描きます。

実際に moveTo と lineTo でやった例は、こちらです。

この方法は、円で描くのではなく、線で描いています。
そのため、円と円の間が描けるわけです。

では、使っている関数を紹介したいと思います。

線の始点を指定します。
ここでは、ひとつ前の mousemove での座標、もしくは mousedown での座標を指定しています。

lineTo で指定した始点から、
線を引くときの終点を指定します。
ここでは、現在の座標を指定しています。

CanvasRenderingContext2D.strokeStyle で取得・変更できます。

1
2
3

var ctx = canvas.getContext("2d");
ctx.strokeStyle = "red"; // 赤
ctx.strokeStyle = "green"; // 緑

CanvasRenderingContext2D.lineWidth で取得・変更できます。
円で描いた時は、arc メソッドの第３引数で指定していたので、それの代わりです。

1 2	var ctx = canvas.getContext("2d"); ctx.lineWidth = 100;

Canvasで使える関数が紹介されています。
「こんな機能あったんだ～」という新発見もあるので、一度見てみてください！