canvasで簡単なお絵かきっぽいものを作る

キャンバスでは最初の設定は下記のようにする

var canvas = document.getElementById("canvas");
var ctx=canvas.getContext("2d");
function init(){

}

で今回はmouse系のイベントでマウスの状態を判別する

//touchstart,touchmove,touchendがあるらしい
function init(){
    canvas.addEventListener("mousemove", drawPaint);     
    canvas.addEventListener("mouseup",function(){
        //マウスを上げた
        mouseState = "up";
    });
    canvas.addEventListener("mousedown",function(){
        //マウスを下ろした
        mouseState = "down";
    });
    canvas.addEventListener("mouseleave",function(){
        //マウスをあげたと同じとみなしてしまう。
        mouseState = "up";
    });
    
}

mouseleaveでupに状態を変更しているのは後ほど分かります。

var mouseX = -1;
var mouseY = -1;

function drawPaint(e){
    
    var x = e.clientX;     
    var y = e.clientY;
    if(mouseState == "down"){
        ctx.strokeStyle = "rgba(255,0,0,1)";     
        //線の太さは?
        ctx.lineWidth = 1;     
        ctx.beginPath();
        ctx.moveTo(mouseX, mouseY);     
        ctx.lineTo(x, y);     
        ctx.stroke();     
        ctx.closePath();
    }
    
    mouseX = x;
    mouseY = y;
}

のように状態がdownの時には、線を書くようにしています。線に関しては、lineWedthで太さを決定して、strokeStyleでは、色の設定などをしています。

mouseleaveでマウスの状態をアップにしているのは、マウスがエリアの外でmouseupされた場合に、感知できないので、エリアの外に出たら、戻ってきた時にマウスの描画をしないようにしいています。

参考:ASCII

  • written on 2012.11.07
  • category : canvas

Next / Prev

前の記事:

次の記事:

Same Category

Page top↑