将鼠标位置(0，0）设置为画布的中心

Making mouse position (0, 0) the center of the canvas

本文关键字：位置 鼠标 设置      更新时间：2023-12-18

所以我最近一直在摆弄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); }

这是我的代码笔。

  • 您需要转换上下文以将原点移动到中心
  • 您还需要反转鼠标坐标的平移，因为它们仍然相对于左上角（假设坐标已更正为相对于画布）

示例：

var cx = canvas.width * 0.5;
var cy = canvas.height * 0.5;
ctx.translate(cx, cy);            // translate globally once

对于每个鼠标坐标，使用平移位置进行补偿：

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

调整鼠标位置：

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