マウスの位置（0、0）をキャンバスの中心にする

Question

私は最近、html5キャンバスを使いこなし、パーティクルシステムを作る方法を見つけようとしています。それがうまくいく間、私はvx =マウス座標（特にx）を作りたいと思いますが、それらは中心から始まります。

基本的には、カーソルがキャンバスの中心にある場合、vxは0になり、キャンバスの中心から右にカーソルがある場合は、マウスの正の座標を持ちますカーソルはキャンバスの中心から左にあり、それは負のマウス座標を有する）。それは私だけだろう、達成されると

p.speed += p.vx

はここに私のjavascriptです：ここでは

window.onload = function(){ 
var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 
var W = window.innerWidth, H = window.innerHeight; 
canvas.width = W; 

canvas.height = H; 
var particles = []; 
var particle_count = 100; 
for(var i = 0; i < particle_count; i++) 
{ 
    particles.push(new particle()); 
} 
function particle() 
{ 
this.vx = -1 + Math.random() * 2; 
    this.speed = {x: 0, y: -15+Math.random()*10}; 
    this.location = {x: W/2, y: H/2}; 
    this.radius = 5+Math.random()*10; 
    this.life = 20+Math.random()*10; 
    this.remaining_life = this.life; 

    this.r = Math.round(Math.random()*255); 
    this.g = Math.round(Math.random()*55); 
    this.b = Math.round(Math.random()*5); 

} 
function draw() 
{ 
    ctx.globalCompositeOperation = "source-over"; 
    ctx.fillStyle = "black"; 
    ctx.fillRect(0, 0, W, H); 
    ctx.globalCompositeOperation = "lighter"; 
    for(var i = 0; i < particles.length; i++) 
    { 
     var p = particles[i]; 
     ctx.beginPath(); 
     p.opacity = Math.round(p.remaining_life/p.life*100)/100 
     var gradient = ctx.createRadialGradient(
       p.location.x, p.location.y, 0, p.location.x, p.location.y, p.radius); 
     gradient.addColorStop(0, "rgba("+p.r+", "+p.g+", "+p.b+", "+p.opacity+")"); 
     gradient.addColorStop(0.5, "rgba("+p.r+", "+p.g+", "+p.b+", "+p.opacity+")"); 
     gradient.addColorStop(1, "rgba("+p.r+", "+p.g+", "+p.b+", 0)"); 
     ctx.fillStyle = gradient; 

ctx.arc(p.location.x, p.location.y, p.radius, Math.PI*2, false); 
     ctx.fill(); 
     p.remaining_life--; 
     p.radius--; 
     p.location.x += p.speed.x += p.vx; 
     p.location.y += p.speed.y; 
     if(p.remaining_life < 0 || p.radius < 0) { 
      particles[i] = new particle(); 
     } 
    } 
} 

setInterval(draw, 33); } 

私codepenです。

Answer 1

• 文脈を翻訳して原点を中心に移動する必要があります。
• また、キャンバスに相対的な座標に補正されていると仮定して、左上隅を基準にしたまま、マウスの座標を逆にする必要があります。

例：マウスの位置を調整する

var pos = getMousePosition(evt); // see below 
var x = pos.x - cx; 
var y = pos.y - cy; 

：各マウスについて

var cx = canvas.width * 0.5; 
var cy = canvas.height * 0.5; 

ctx.translate(cx, cy);   // translate globally once 

は、変換位置と補正座標

function getMousePosition(evt) { 
    var rect = canvas.getBoundingClientRect(); 
    return { 
     x: evt.clientX - rect.left, 
     y: evt.clientY - rect.top 
    } 
}