畫布點擊粒子爆炸效果不針對鼠標位置

Question

我想要做一個簡單的粒子爆炸效果，所以當用戶點擊應用程序的某個地方它得到的用戶點擊位置，創建一個畫布，創建爆炸效果，然後刪除畫布。

我完全新的畫布，並得到來自這個網站的想法：canvas example

的情況是它沒有得到TE點擊爆炸效應位置正確，它應該在點擊區域中心開始。但是我越遠離左/上角，越遠到屏幕上我的效果就顯示出來了。

因此，這裏的一些代碼：

在我app.components.ts（其是主要的文件，我需要它的每一頁上工作，所以我決定在這裏把我的代碼），我有以下：

import { Particle } from './Particle'; // IMPORT A PARTICLE FUNCTION 

// THESE ARE MY PARTICLE OPTIONS 
public ANGLE: number = 90; 
public SPEED: number = 8; 
public PARTICLE_SIZE: number = 1; 
public NUMBER_OF_PARTICLES: number = 20; 
public RANGE_OF_ANGLE: number = 360; 
public PARTICLE_LIFESPAN: number = 15; 
public PARTICLE_COLOR: string = 'rgb(255,0,0)'; 
public particles: any[] = []; 
public pCtxWidth: number = window.innerWidth; // not using 
public pCtxHeight: number = window.innerHeight; // not using 

document.addEventListener('click', (data) => { 

    // CREATE MY CANVAS HTML ELEMENT AND APPEND IN THE BODY 
    let c = document.createElement('canvas'); 
    c.className = 'clique'; 
    c.style.position = 'absolute'; 
    c.style.width = String(window.innerWidth) + 'px'; //I'M USING THE WHOLE SCREEN SIZE, BUT IT DOESN'T NEEDS TO BE THAT BIG, IT CAN BE 80px 
    c.style.height = String(window.innerHeight) + 'px'; 
    c.style.left = '0px'; 
    c.style.top = '0px'; 
    document.body.appendChild(c); 

    // GET MY PAGE CLICK POSITION, ALSO TRIED WITHOUT - c.offsetLeft 
    const x = data.pageX - c.offsetLeft, 
     y = data.pageY - c.offsetTop; 

    // CREATE MY 2DCONTEXT AND CALL THE SPARK FUNCTION 
    let pCtx = c.getContext("2d"); 
    this.spark(x, y, this.ANGLE, pCtx, c); 
    this.smartAudio.play('click'); 
}, true); 

// draw a new series of spark particles 
spark = (x, y, angle, pCtx, c) => { 
    // create 20 particles 10 degrees surrounding the angle 
    for (var i = 0; i < this.NUMBER_OF_PARTICLES; i++) { 
     // get an offset between the range of the particle 
     let offset = Math.round(this.RANGE_OF_ANGLE * Math.random()) 
      - this.RANGE_OF_ANGLE/2; 
     let scaleX = Math.round(this.SPEED * Math.random()) + 1; 
     let scaleY = Math.round(this.SPEED * Math.random()) + 1; 
     this.particles.push(new Particle(x, y, 
      Math.cos((angle + offset) * Math.PI/180) * scaleX, 
      Math.sin((angle + offset) * Math.PI/180) * scaleY, 
      this.PARTICLE_LIFESPAN, this.PARTICLE_COLOR, pCtx)); 
    } 
    this.animationUpdate(pCtx, c, x, y); 
} 

animationUpdate = function (pCtx, c, x, y) { 
    // update and draw particles 
    pCtx.clearRect(0, 0, x, y); 
    for (var i = 0; i < this.particles.length; i++) { 
     if (this.particles[i].dead()) { 
      this.particles.splice(i, 1); 
      i--; 
     } 
     else { 
      this.particles[i].update(); 
      this.particles[i].draw(pCtx); 
     } 
    } 
    if (this.particles.length > 0) { 
     // await next frame 
     requestAnimationFrame(() => { this.animationUpdate(pCtx, c, x, y) }); 
    } else { 
     document.body.removeChild(c); 
    } 
} 

這裏是我的Particle：

export function Particle(x, y, xVelocity, yVelocity, lifespan, color, pCtx) { 
    // set initial alpha to 1.0 (fully visibile) 
    this.alpha = 1.0; 
    // dAlpha is the amount that alpha changes per frame, randomly 
    // scaled around the provided particle lifespan 
    this.dAlpha = 1/(Math.random() * lifespan + 0.001); 

    // updates the particle's position by its velocity each frame, 
    // and adjust's the alpha value 
    this.update = function() { 
    x += xVelocity; 
    y -= yVelocity; 
    this.alpha -= this.dAlpha; 
    if (this.alpha < 0) 
     this.alpha = 0; 
    } 

    // draw the particle to the screen 
    this.draw = function(pCtx: any) { 
    pCtx.save(); 
    pCtx.fillStyle = color; 
    pCtx.globalAlpha = this.alpha; 
    pCtx.beginPath(); 
    pCtx.arc(x, y, 1, 0, 2 * Math.PI, false); 
    pCtx.closePath(); 
    pCtx.fill(); 
    pCtx.restore(); 
    } 

    // returns TRUE if this particle is "dead": 
    // i.e. delete and stop updating it if this returns TRUE 
    this.dead = function() { 
    return this.alpha <= 0; 
    } 
} 

所以一個I做錯了什麼？我怎樣才能讓粒子效果爆炸到我點擊的地方？

這是我得到的圖片，我點擊了左上方的X，但爆炸發生在點擊區域的下方。

在此先感謝。

Answer 1

我看不到你設置畫布的分辨率，你只是設置畫布的顯示尺寸。這將解釋渲染和用戶IO之間的不匹配。

請嘗試以下操作當您創建畫布

c.style.width = (c.width = innerWidth) + 'px'; 
c.style.height = (c.height = innerHeight) + 'px'; 

將匹配屏幕的分辨率來顯示大小，這樣，你會在正確的像素位置進行渲染。