向HTML5 Canvas添加用于按键的eventListener

Adding an eventListener for key presses to HTML5 Canvas

本文关键字：eventListener 用于 HTML5 Canvas 添加更新时间：2023-09-26

我正在尝试添加一个功能，在该功能中，您可以在将字母键入到流动恒星的随机集合中时添加字母。我尝试了很多事情，但一辈子都想不出来。有什么建议吗？提前谢谢。

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Space</title>
  </head>
<style>
</style>
<body>
<div>
<canvas id="canvas"></canvas>
</div>
    <audio id="audio" controls>
        <source src="song.m4a" type="audio/mpeg">
    </audio>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var width = window.innerWidth;
var height = window.innerHeight;
var xCirc;
var yCirc;
var rCirc;
var animate = true;
var shapes = ['circle', 'square', 'triangle', 'heart', 'star'];
var shape = 0;
var song = document.getElementById("audio");
song.autoplay = true;
song.load();
canvas.width = width;
canvas.height = height;
makeParticles();
//makeShapes();
function click(){
    shape++;
    if (shape > shapes.length - 1){
        shape = 0;
    }
    var pType = shapes[shape];
    for (var i = 0; i < particles.length; i++){
        particles[i].particleType = pType;
    }
}
function doKeyDown(evt){
}
start();

function makeParticles() {
    xCenter = canvas.width/2;
    yCenter = canvas.height/2;
    particles = [];
    for (var i = 0; i < 1000; i++){
        particles.push(new Particle(shapes[shape]));
    }
}
function Circle(r1, r2, gradient2) {
    var r1 = 150;
    var r2 = canvas.width - (canvas.width/2);
    var gradient1 = context.createRadialGradient(width/2, height/2, r1, width/2, height/2, r2);
    gradient1.addColorStop(0, "#46C7C7");
    gradient1.addColorStop(1, "#0C090A");
    context.fillStyle = gradient1;
    context.fillRect(0, 0, canvas.width, canvas.height);
    var gradient2 = context.createRadialGradient(width/2, height/2, 120, width/2, height/2, 150);
    gradient2.addColorStop(0, "black");
    gradient2.addColorStop(.5, "#008080");
    gradient2.addColorStop(1, "#54C571");
    context.beginPath();
    context.arc(width/2, height/2, 150, 0, 2 * Math.PI, true);
    context.fillStyle = gradient2;
    context.fill();
}
function start() {
    if(animate){
        window.requestAnimationFrame(start);
    }
    draw();
    moveParticles();
    canvas.addEventListener("click", click);
    canvas.addEventListener("keypress", doKeyDown, true);
    console.log(num);
}

function Particle() {
    this.x = Math.floor((Math.random() * canvas.width) + 1);
    this.y = Math.floor((Math.random() * canvas.height) + 1);
    this.z = Math.floor((Math.random() * canvas.width));
    var grad = context.createRadialGradient(this.x, this.y, Math.floor((Math.random() * 10) + 1), this.x, this.y, Math.floor((Math.random() * 10) + 1));
    var colors = ["#4CC417", "#3EA055", "#54C571", "#41A317", "#46C7C7", "#4EE2EC", "#00FFFF", "#008080", "#57FEFF", "#3BB9FF", "#1F45FC"];
    grad.addColorStop(0, colors[Math.floor(Math.random()*colors.length)]);
    grad.addColorStop(1, colors[Math.floor(Math.random()*colors.length)]);
    this.color = grad;
    this.radius = 1;
    this.draw = function() {
        xP = (xCenter - this.x) * (canvas.width/this.z);
        xP += xCenter;
        yP = (yCenter - this.y) * (canvas.width/this.z);
        yP += yCenter;
        rP = (canvas.width/this.z);
        switch (this.particleType) {
            case 'circle':
                context.beginPath();
                context.arc(xP, yP, rP, 0, 2 * Math.PI, true);
                context.fillStyle = this.color;
                context.fill();
                break;
            case 'square':
                context.beginPath();
                context.rect(xP, yP, rP * 3, rP * 3);
                context.fillStyle = this.color;
                context.fill();
                break;
            case 'triangle':
                context.beginPath();
                context.moveTo(xP, yP);
                context.lineTo(xP + (rP * 2), yP + (rP * 2));
                context.lineTo(xP - (rP * 2), yP + (rP * 2));
                context.fillStyle = this.color;
                context.fill();
                break;
            case 'heart':
                context.beginPath();
                context.moveTo(xP, yP - (rP * 2));
                context.bezierCurveTo(xP - (rP * 6), yP - (rP * 11), xP - (rP * 2), yP - (rP * 12), xP, yP - (rP * 7));
                context.bezierCurveTo(xP + (rP * 2), yP - (rP * 12), xP + (rP * 6), yP - (rP * 11), xP, yP - (rP * 2));
                context.fillStyle = this.color;
                context.fill();
                break;
            case 'star':
                context.beginPath();
                context.moveTo(xP, yP);
                context.lineTo(xP - (rP * 1), yP + (rP * 3));
                context.lineTo(xP - (rP * 4), yP + (rP * 3));
                context.lineTo(xP - (rP * 2), yP + (rP * 6));
                context.lineTo(xP - (rP * 3), yP + (rP * 9));
                context.lineTo(xP, yP + (rP * 7));
                context.lineTo(xP + (rP * 3), yP + (rP * 9));
                context.lineTo(xP + (rP * 2), yP + (rP * 6));
                context.lineTo(xP + (rP * 4), yP + (rP * 3));
                context.lineTo(xP + (rP * 1), yP + (rP * 3));
                context.fillStyle = this.color;
                context.fill();
                break;
        }
    }
}
function draw() {   
    Circle();
    for (var i = 0; i < particles.length; i++){
        var p = particles[i].draw();
            //context.fillStyle = p.color;
            //context.fillText("Black Hole Sun", xP, yP);

    }
}
function clearCanvas() {
    canvas.width = canvas.width;
}
function moveParticles() {
    for (var j = 0; j < particles.length; j++){
        var p = particles[j];
        p.z -= 1;
        if (p.z <= 0){
            p.z = canvas.width;
        } 
    }
}

因为你还没有真正说明你想要什么，

我刚刚对您的代码做了一个非常小的修复，我将eventlistener附加到了文档中，而不是画布中。

以下是jsFiddle和代码片段

jsFiddle：https://jsfiddle.net/CanvasCode/auyybsj6/

javascript

function doKeyDown(evt) {
  alert(event.keyCode);
}
...
function start() {
  if (animate) {
    window.requestAnimationFrame(start);
  }
  draw();
  moveParticles();
  canvas.addEventListener("click", click);
  document.addEventListener("keypress", doKeyDown, false);
  console.log(num);
}