railsとjsでお絵かき - hiiihaaaの日記

railsで簡単なお絵かき機能を実装したのでメモ

html5のcanvasを使うだけ。特にgemなどは必要なしです。

間違い、ご指摘等ありましたらお願いします！

1. 絵を描くためのキャンバスを作成

#html.haml
%canvas#test{height: "500", width: "900"}
#btn_clear 消去

canvasタグが絵を描くためのキャンバスになります。

キャンバスのサイズはcssで指定すると、

ペン入れした時にペンの位置がなぜかズレます。。。

htmlの中で規定すると正しく認識されました。

2行目は書いたものが消せるようにボタンを設置。

2. jsでお絵かき機能を実装

キャンバス内でマウスをクリックしたまま動かすと、動きに合わせて線が描かれます。

クリックから手を離すと線を描くのを停止。

消去ボタンを押すと、書いたものがすべて消去されます

js
 
$(document).on('turbolinks:load', function(){
var canvas = document.getElementById('test');
var cnv = $('#test')
if (canvas.getContext) {
 
var ctx = canvas.getContext('2d');
 
flag = false;

cnv.on('mousedown', function(e){
flag = true
ctx.beginPath();
ctx.moveTo(e.offsetX, e.offsetY);
 });

cnv.on('mouseup mouseout', function(){
flag = false
 })

cnv.on('mousemove', function(e){
if(flag){
ctx.lineTo(e.offsetX, e.offsetY);
ctx.stroke();
 }
 })

$("#btn_clear").on('click', function(){
ctx.clearRect(0, 0, canvas.width, canvas.height)
 })
 }
})

$(document).on('turbolinks:load', function(){
var canvas = document.getElementById('test');
var cnv = $('#test')
if (canvas.getContext) {
var ctx = canvas.getContext('2d');

ctx.lineWidth = 5
ctx.strokeStyle = "#ff0000"

 
flag = false;

cnv.on('mousedown', function(e){
flag = true
ctx.beginPath();
ctx.moveTo(e.offsetX, e.offsetY);
 });

cnv.on('mouseup mouseout', function(){
flag = false
 })

cnv.on('mousemove', function(e){
if(flag){
ctx.lineTo(e.offsetX, e.offsetY);
ctx.stroke();
 }
 })

$("#btn_clear").on('click', function(){
ctx.clearRect(0, 0, canvas.width, canvas.height)
 })
 }
})

線を描く時は、大きく３つのイベントのもとで処理を進めています。

　①マウスのクリック(mousedown)

　　フラグを立て、パスをリセット(beginPath)、線の開始点を定義する(moveTo)

　②指が上がる、もしくはキャンバスからフレームアウト(mouseup mouseout)

　　フラグを折る

　③マウスを動かす(mousemove)

　　フラグが立っている時に限り、マウスの位置を認識し、線を引く

書いたものを消すときは、範囲を明確に指定しないとダメみたいです。

今回はキャンバス全体を指定して消してしまっています。

本当に簡単ですが、一応これで物を書くことはできます。

線の太さや色も変えられますが、今回はとりあえず割愛。