当用户单击屏幕时,我会随机生成文本。一切都与运动,颜色等有关,除了它不断地在数组中循环以更改单词。如何获得用户每次单击时随机选择一个单词并将其保留在屏幕上而不循环遍历数组的方式?这是代码:
<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>
最佳答案
您应该将单词选择逻辑从绘图功能中移出。只需在进入循环之前选择一个单词,然后将该单词传递给draw函数,这唯一的工作就是实际绘制一些东西。
您可以这样做:
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();
<canvas id="canvas" width="500" height="500"></canvas>
请注意,我在
word
类中添加了Text
属性,并添加了从全局列表中选择单词的pickWord
函数。关于javascript - 当用户单击时,如何停止文本在数组中循环显示?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/41081613/