タグ: canvas

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

/ shundroid

こんにちはー。

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

 asterisk.js 
【JS】Canvasで丸や四角で「消す」方法
http://polaris-bear.lolipop.jp/shunroom/575
こんにちはー。題名のとおり、Canvas の「消す」機能で、丸などに形を変える方法を紹介します。「消す」機能についてまずはじめに、消す方法としてのルールを書いておき...

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

うまくいかない例

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

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

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

moveToとlineToを使う

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

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

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

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

moveTo 関数

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

lineTo 関数

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

色を変えるには

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

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

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

太さを変えるには

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

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

詳しいサイト

 www.html5.jp 
Canvasリファレンス - HTML5.JP
http://www.html5.jp/canvas/ref.html

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

【JS】Canvasで丸や四角で「消す」方法

/ shundroid

こんにちはー。
題名のとおり、Canvas の「消す」機能で、丸などに形を変える方法を紹介します。

「消す」機能について

まずはじめに、消す方法としてのルールを書いておきます。

  • 白く塗る はダメ！（背景が白でない場合があるため）
  • 消した部分は透明になるようにする。

実装のポイント

context の globalCompositeOperation を、destination-out に変更すると、
fill や stroke で指定した領域を 切り取る ことができます。

また、このプロパティは、その他いろいろな値に変更できます。

 www.html5.jp 
globalCompositeOperation プロパティ - Canvasリファレンス - HTML5.JP
http://www.html5.jp/canvas/ref/property/globalCompositeOperation.html

サンプル：円形で消す

globalCompositeOperationを変更した状態で、arc メソッドを呼ぶことでできます。

var ctx = document.getElementById("xxx").getContext("2d");
function eraseArc() {
  ctx.globalCompositeOperation = "destination-out";
  ctx.beginPath();
  ctx.arc(100, 100, 50, 0, Math.PI*2, false);
  ctx.fill();
}

arc() の引数

arc(中心x, 中心y, 半径, 開始角度(ラジアン), 終了角度(ラジアン), どっち回りか(true→反時計回り))

応用例

See the Pen Canvas Erase By Arc by shundroid (@shundroid) on CodePen.dark

  • チェックボックス ON：描く、OFF：消す（globalCompositeOperation で切り替えています）
  • 背景色を変更で、消した部分が透明になっていることを確認できます

掲載したサンプルコードでは、ctx.arc で描画していますが、
このサンプルは mousemove で動いた時に描いているので、arc で描くと円が散らばってしまい、うまく描けません。
そのため、moveTo と、lineTo を使って描いています。

この方法については、次回ブログで書きたいと思います。

「消す」モードを戻したい

このままでは、常に stroke や fill した部分が切り取られてしまうため、
元の値に戻しておきましょう。
デフォルトの値は、source-over です。

var ctx = document.getElementById("xxx").getContext("2d");
ctx.globalCompositeOperation = "source-over";