javascriptでマウスカーソルの位置に応じた文字の移動

Question

前提・実現したいこと

https://groxi.jp/

こちらのサイトのトップ部分のマウスカーソル位置に応じて文字が動く部分をcanvasを用いて実装しようとしています。

発生している問題・エラーメッセージ

文字を動かすことまではできたのですが、思うように右・左と思うように動かすことができません。

該当のソース

const brown_text_name = ['brown_a_1', 'brown_a_2', 'brown_c', 'brown_H', 'brown_i', 'brown_M', 'brown_p',
'brown_P_1', 'brown_P_2', 'brown_s_1', 'brown_s_2', 'brown_T', 'brown_v'];

var brown_text = {
	
// 描画する文字の各座標・角度・フォント（サイズ・種類）・色・値

	'brown_a_1'   : {'pointX': 1144, 'pointY': 333, 'angle': 20,  'font_size': '200px Fredoka One', 'color': 'rgba(88, 56, 34, 1)', 'value': 'a'},
	'brown_a_2'   : {'pointX': 823,  'pointY': 427, 'angle': -20, 'font_size': '120px Fredoka One', 'color': 'rgba(88, 56, 34, 1)', 'value': 'a'},
	'brown_c' 	: {'pointX': 1097, 'pointY': 605, 'angle': 20,  'font_size': '120px Fredoka One', 'color': 'rgba(88, 56, 34, 1)', 'value': 'c'},
	'brown_H' 	: {'pointX': -118, 'pointY': 290, 'angle': 340, 'font_size': '330px Fredoka One', 'color': 'rgba(88, 56, 34, 1)', 'value': 'H'},
	'brown_i' 	: {'pointX': 1269, 'pointY': 714, 'angle': 20,  'font_size': '230px Fredoka One', 'color': 'rgba(88, 56, 34, 1)', 'value': 'i'},
	'brown_M' 	: {'pointX': 430,  'pointY': 12,  'angle': 20,  'font_size': '240px Fredoka One', 'color': 'rgba(88, 56, 34, 1)', 'value': 'M'},
	'brown_p' 	: {'pointX': 1321, 'pointY': 656, 'angle': -10, 'font_size': '200px Fredoka One', 'color': 'rgba(88, 56, 34, 1)', 'value': 'p'},
	'brown_P_1'   : {'pointX': 669,  'pointY': 0,   'angle': -25, 'font_size': '350px Fredoka One', 'color': 'rgba(88, 56, 34, 1)', 'value': 'P'},
	'brown_P_2'   : {'pointX': 1074, 'pointY': 113, 'angle': -25, 'font_size': '230px Fredoka One', 'color': 'rgba(88, 56, 34, 1)', 'value': 'P'},
	'brown_s_1'   : {'pointX': 414,  'pointY': 496, 'angle': -30, 'font_size': '270px Fredoka One', 'color': 'rgba(88, 56, 34, 1)', 'value': 's'},
	'brown_s_2'   : {'pointX': 342,  'pointY': 656, 'angle': -20, 'font_size': '120px Fredoka One', 'color': 'rgba(88, 56, 34, 1)', 'value': 's'},
	'brown_T' 	: {'pointX': 209,  'pointY': 178, 'angle': -20, 'font_size': '150px Fredoka One', 'color': 'rgba(88, 56, 34, 1)', 'value': 'T'},
	'brown_v' 	: {'pointX': 927,  'pointY': 311, 'angle': -20, 'font_size': '150px Fredoka One', 'color': 'rgba(88, 56, 34, 1)', 'value': 'v'},

};

$(document).ready(function() {
    draw_canvas();
});

function draw_canvas() {
// TOP部分の描画コンテキスト取得
var canvas = document.getElementById('top_canvas');

// 描画範囲設定
canvas.width = window.innerWidth;
canvas.height = 1900;

// コンテキスト取得
if (canvas.getContext) {
	var context_brown = canvas.getContext('2d');		// 茶色文字用コンテキスト
}

// 茶色文字描画
for (let i = 0; i <= brown_text_name.length - 1; i++) {
    context_brown.save();

    var x = brown_text[brown_text_name[i]]['pointX'];
    var y = brown_text[brown_text_name[i]]['pointY'];
    context_brown.font = brown_text[brown_text_name[i]]['font_size'];
    context_brown.fillStyle = brown_text[brown_text_name[i]]['color'];

    context_brown.translate(x, y);
    context_brown.rotate((brown_text[brown_text_name[i]]['angle'] ) * Math.PI / 180);
    context_brown.translate(-x, -y);
    context_brown.fillText(brown_text[brown_text_name[i]]['value'], x, y);

	context_brown.restore();
		
}

}

window.onload=function(){
	//マウス移動時のイベントをBODYタグに登録する
	document.body.addEventListener("mousemove", function(e){
  
	  //座標を取得する
	  var mX = e.pageX;  //X座標
	  var mY = e.pageY;  //Y座標
  
	  //座標を表示する
	document.getElementById("txtX").value = mX; // 確認用
	document.getElementById("txtY").value = mY; // 確認用
	brown_text['brown_a_1']['pointX'] += (mX - window.innerWidth) / 10;
	brown_text['brown_a_1']['pointY'] = mY;
		
		console.log(brown_text['brown_a_1']['pointX'], brown_text['brown_a_1']['pointY']);
		draw_canvas();
	});
}

Answer 1

e.pageXはページ内の絶対座標で、マウスカーソルの移動量ではありません。
mousemoveごとに絶対座標値-ウィンドウサイズをひたすら加算していくので左へぶっとんでいきます。

前回のmousemoveイベント発生前の座標を記憶しておき、今回イベント座標との差を求めることで目的の動作ができるのではないでしょうか。

// x座標だけのサンプル
var preX = 0 //前回イベント発生時座標

window.onload=function(){
    //マウス移動時のイベントをBODYタグに登録する
    document.body.addEventListener("mousemove", function(e){

      //座標を取得する
      var cX = e.pageX;  //X座標
      //前回座標との差
      var mX = cX - preX
      //洗い替え
      preX = cX

    brown_text['brown_a_1']['pointX'] += mX / 10 //移動距離の1/10を加算

Comments

[Karna554]

ありがとうございます。
絶対座標だから左や右に吹っ飛んでいったんですね.....