Question

我有用户点击屏幕时随机生成的文字。一切都与运动，颜色等有关，除了它不断地循环通过改变单词的数组。每次用户点击并在屏幕上保留该单词而不循环播放数组时，如何让它随机选择一个单词？这是代码：

<html>
<head>
<script>
var canvas;
var context;
var texts = [];
var timer;

function init() {
    canvas = document.getElementById('canvas');
    context = canvas.getContext("2d");
    resizeCanvas();
    window.addEventListener('resize', resizeCanvas, false);
    window.addEventListener('orientationchange', resizeCanvas, false);

    canvas.onclick = function(event) {
        handleClick(event.clientX, event.clientY);
    }

    var timer = setInterval(resizeCanvas, 30);
}

function Text(x,y,textColor) {
        this.x = x;
        this.y = y;
        this.textColor = textColor;

        this.vx = Math.random() * 30 - 15;
        this.vy = Math.random() * 30 - 15;
        this.time = 300;
}

function handleClick(x,y) {
        var colors = [[255,0,0],[255,255,0],[0,0,255]];
        var textColor = colors[Math.floor(Math.random()*colors.length)];
        texts.push(new Text(x,y,textColor));
        for (var i=0; i<texts.length; i++) {
            drawText(texts[i]);
        }
}

function timeToFade(time) {
    if(time > 100) {
        return 1;
    }
    else {
        return time / 100;
    }
}

function drawText(text) {
     context.font = "bold 60px Verdana";
     var textSayings = ['Cool!', 'Nice!', 'Awesome!', 'Wow!', 'Whoa!', 'Super!', 'Woohoo!', 'Yay!', 'Yeah!']
     var whichText = textSayings[Math.floor(Math.random()*textSayings.length)];

     var c = text.textColor
     context.fillStyle = 'rgba(' + c[0] + ', ' + c[1] + ', ' + c[2] + ', ' + (text.time / 100) + ')';
     context.fillText(whichText,text.x,text.y); 
}

function resizeCanvas() {
    canvas.width = window.innerWidth-20;
    canvas.height = window.innerHeight-20;
    fillBackgroundColor();
    for (var i=0; i<texts.length; i++) {
        var te = texts[i];
        drawText(te);

        if (te.x + te.vx > canvas.width || te.x + te.vx < 0)
            te.vx = -te.vx
        if (te.y + te.vy > canvas.height || te.y + te.vy < 0)
            te.vy = -te.vy
        if (te.time === 0) {
            texts.splice(i,1);
        }

        te.time -= 3;
        te.x += te.vx;
        te.y += te.vy;
    }
}

function fillBackgroundColor() {
    context.globalCompositeOperation = 'source-over';
    context.fillStyle = 'rgba(0, 0, 0, 1)';
    context.fillRect(0,0,canvas.width,canvas.height);
    context.globalCompositeOperation = 'lighter';
}

window.onload = init;
</script>
</head>
<body>
    <canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>

Answer 1

您应该将单词拾取逻辑移出绘图功能。只需在进入循环之前选择一个单词，然后将该单词传递给绘制函数，该函数只能实际绘制一些东西。

你可以这样做：

＆＃13;

var canvas;
var context;
var texts = [];
var timer;
var textSayings = ['Cool!', 'Nice!', 'Awesome!', 'Wow!', 'Whoa!', 'Super!', 'Woohoo!', 'Yay!', 'Yeah!']

function init() {
  canvas = document.getElementById('canvas');
  context = canvas.getContext("2d");
  resizeCanvas();
  window.addEventListener('resize', resizeCanvas, false);
  window.addEventListener('orientationchange', resizeCanvas, false);

  canvas.onclick = function(event) {
    handleClick(event.clientX, event.clientY);
  }

  var timer = setInterval(resizeCanvas, 30);
}

function Text(x, y, textColor, word) {
  this.x = x;
  this.y = y;
  this.word = word;
  this.textColor = textColor;

  this.vx = Math.random() * 30 - 15;
  this.vy = Math.random() * 30 - 15;
  this.time = 300;
}

function handleClick(x, y) {
  var colors = [
    [255, 0, 0],
    [255, 255, 0],
    [0, 0, 255]
  ];
  var textColor = colors[Math.floor(Math.random() * colors.length)];
  texts.push(new Text(
    x,
    y,
    textColor,
    pickWord()
  ));
  for (var i = 0; i < texts.length; i++) {
    drawText(texts[i]);
  }
}

function timeToFade(time) {
  if (time > 100) {
    return 1;
  } else {
    return time / 100;
  }
}

function pickWord() {
  return textSayings[Math.floor(Math.random() * textSayings.length)];
}

function drawText(text) {
  context.font = "bold 60px Verdana";

  var c = text.textColor
  context.fillStyle = 'rgba(' + c[0] + ', ' + c[1] + ', ' + c[2] + ', ' + (text.time / 100) + ')';
  context.fillText(text.word, text.x, text.y);
}

function resizeCanvas() {
  canvas.width = window.innerWidth - 20;
  canvas.height = window.innerHeight - 20;
  fillBackgroundColor();
  for (var i = 0; i < texts.length; i++) {
    var te = texts[i];
    drawText(te);

    if (te.x + te.vx > canvas.width || te.x + te.vx < 0)
      te.vx = -te.vx
    if (te.y + te.vy > canvas.height || te.y + te.vy < 0)
      te.vy = -te.vy
    if (te.time === 0) {
      texts.splice(i, 1);
    }

    te.time -= 3;
    te.x += te.vx;
    te.y += te.vy;
  }
}

function fillBackgroundColor() {
  context.globalCompositeOperation = 'source-over';
  context.fillStyle = 'rgba(0, 0, 0, 1)';
  context.fillRect(0, 0, canvas.width, canvas.height);
  context.globalCompositeOperation = 'lighter';
}

window.onload = init;
init();

＆＃13;

<canvas id="canvas" width="500" height="500"></canvas>

＆＃13;

请注意，我向word类添加了Text属性，并从全局列表中选择了一个pickWord函数。

当用户点击时，如何阻止我的文本在数组中循环？

1 个答案: