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

TOC

  1. うまくいかない例
  2. moveToとlineToを使う
    1. moveTo 関数
    2. lineTo 関数
    3. 色を変えるには
    4. 太さを変えるには
  3. 詳しいサイト

こんにちはー。

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

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

うまくいかない例

See the Pen Canvas Mousemove 円で描いてうまくいかない例 by shundroid (@shundroid) on CodePen.

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

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

moveToとlineToを使う

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

See the Pen Canvas mousemove lineToとmoveTo by shundroid (@shundroid) on CodePen.

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

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

moveTo 関数

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

lineTo 関数

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

色を変えるには

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

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

参考: https://developer.mozilla.org/ja/docs/Web/API/CanvasRenderingContext2D/strokeStyle

太さを変えるには

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

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

詳しいサイト

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