canvasでマウスカーソルが動いた跡を表示するには

マウスカーソルの動いた点を表示するには、drawRectが使える。また、addEventListenerでマウスの動きを取得する事ができるので、

var canvas = document.getElementById("canvas");
var ctx=canvas.getContext("2d");
//onloadなどで実行
function init(){
    canvas.addEventListener("mousemove", drawPaint);
}

として、マウスの位置が動いた時にdrawPaitというのが動くように設定をしておいて

function drawPaint(e){
    var x = e.clientX;     
    var y = e.clientY;
    ctx.fillStyle = "rgba(255,0,0,1)";     
    ctx.fillRect(x,y,1,1);
}

で、実行すると、マウスをキャンバス上で動かした際に、その位置をプロットするプログラムを書くことができた!

参考:ASCII

  • written on 2012.11.07
  • category : canvas

Next / Prev

前の記事:

次の記事:

Same Category

Page top↑