Question

我试图添加一个功能，您可以在输入随机的流星组时添加字母。我已经尝试了很多东西，而且不能为我的生活弄清楚。有什么建议？提前谢谢。

<!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;
        } 
    }
}

Answer 1

因为你还没有真正说出你想要的东西，

我刚刚对你的代码做了一个非常小的修复，我已将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);
}

为按键添加eventListener到HTML5 Canvas

1 个答案: