Question

我为我的网站创建了一个画布横幅，其中包含一些编程标签。工作近乎完美。哪个只是我无法解决的问题。

所有标签都从中心开始（ofc。在我的JS文件的第23/24行，我设置了所有内容的起始位置）。只有我想要的是设置每个标签的随机起始位置。问题是我不知道如何开始这个。

以下是我的文件：

HTML：

<header id="pageheader">
    <canvas id="bannerCanvas"></canvas>
</header>

CSS：

#pageheader{
    height: 100px;
    width:100%;
    background: #f4f5ef; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#222, #f4f5ef); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#222, #f4f5ef); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#222, #f4f5ef); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#222, #f4f5ef);
}

Javascript（Jquery）

$(function(){
    var word0 = '<RUBY>';
    var word1 = '<HTML>';
    var word2 = '<PHP>';
    var word3 = '<SQL>';
    var word4 = '<CSS>';
    var word5 = '<C#>';
    var word6 = '<JAVASCRIPT>';
    var word7 = '<JAVA>';
    var word8 = '<XML>';
    var word9 = '<PYTHON>';

    var fps = 30;

    var delta = 1; // range (from 0) of possible dx or dy change
    var max = 2; // maximum dx or dy values

    var jCanvas = $('#bannerCanvas');
    var canvas = document.getElementById('bannerCanvas');
    canvas.width = jCanvas.parent().width();
    canvas.height = jCanvas.parent().height();

    var start_x = canvas.width / 2; // line 23
    var start_y = canvas.height / 2; // line 34

    jCanvas.bind("click", function(){
        if(interval === undefined){
            interval = window.setInterval(animate, 1000 / fps);
        }
        else{
            interval = clearInterval(interval);
            console.log(interval);
        }
    });

    var cxt = canvas.getContext('2d');
    cxt.fillStyle = '#FF0000';

    var interval = window.setInterval(animate, 1000 / fps);

    var w0x = start_x;
    var w0y = start_y;
    var w1x = start_x;
    var w1y = start_y;
    var w2x = start_x;
    var w2y = start_y;
    var w3x = start_x;
    var w3y = start_y;
    var w4x = start_x;
    var w4y = start_y;
    var w5x = start_x;
    var w5y = start_y;
    var w6x = start_x;
    var w6y = start_y;
    var w7x = start_x;
    var w7y = start_y;
    var w8x = start_x;
    var w8y = start_y;
    var w9x = start_x;
    var w9y = start_y;

    var w0dx = 0;
    var w0dy = 0;
    var w1dx = 0;
    var w1dy = 0;
    var w2dx = 0;
    var w2dy = 0;
    var w3dx = 0;
    var w3dy = 0;
    var w4dx = 0;
    var w4dy = 0;
    var w5dx = 0;
    var w5dy = 0;
    var w6dx = 0;
    var w6dy = 0;
    var w7dx = 0;
    var w7dy = 0;
    var w8dx = 0;
    var w8dy = 0;
    var w9dx = 0;
    var w9dy = 0;

    function getWx(dx){
        var wx = (Math.random() * delta - delta / 2);
        if(Math.abs(wx + dx) > max){ wx *= -1; }
        return wx;
    }
    function getWy(dy){
        var wy = (Math.random() * delta - delta / 2);
        if(Math.abs(wy + dy) > max){ wy *= -1; }
        return wy;
    }
    function bounceX(nw, cur){
        if((cur + nw) < 0 || (cur + nw) > canvas.width){
            return nw *= -1;
        }
        else{
            return nw;
        }
    }
    function bounceY(nw, cur){
        if((cur + nw) < 0 || (cur + nw) > canvas.height){
            return nw *= -1;
        }
        else{
            return nw;
        }
    }
    function animate(){
        w0dx = bounceX(w0dx += getWx(w0dx), w0x);
        w0dy = bounceY(w0dy += getWy(w0dy), w0y);
        w1dx = bounceX(w1dx += getWx(w1dx), w1x);
        w1dy = bounceY(w1dy += getWy(w1dy), w1y);
        w2dx = bounceX(w2dx += getWx(w2dx), w2x);
        w2dy = bounceY(w2dy += getWy(w2dy), w2y);
        w3dx = bounceX(w3dx += getWx(w3dx), w3x);
        w3dy = bounceY(w3dy += getWy(w3dy), w3y);
        w4dx = bounceX(w4dx += getWx(w4dx), w4x);
        w4dy = bounceY(w4dy += getWy(w4dy), w4y);
        w5dx = bounceX(w5dx += getWx(w5dx), w5x);
        w5dy = bounceY(w5dy += getWy(w5dy), w5y);
        w6dx = bounceX(w6dx += getWx(w6dx), w6x);
        w6dy = bounceY(w6dy += getWy(w6dy), w6y);
        w7dx = bounceX(w7dx += getWx(w7dx), w7x);
        w7dy = bounceY(w7dy += getWy(w7dy), w7y);
        w8dx = bounceX(w8dx += getWx(w8dx), w8x);
        w8dy = bounceY(w8dy += getWy(w8dy), w8y);
        w9dx = bounceX(w9dx += getWx(w9dx), w9x);
        w9dy = bounceY(w9dy += getWy(w9dy), w9y);

        w0x += w0dx;
        w0y += w0dy;
        w1x += w1dx;
        w1y += w1dy;
        w2x += w2dx;
        w2y += w2dy;
        w3x += w3dx;
        w3y += w3dy;
        w4x += w4dx;
        w4y += w4dy;
        w5x += w5dx;
        w5y += w5dy;
        w6x += w6dx;
        w6y += w6dy;
        w7x += w7dx;
        w7y += w7dy;
        w8x += w8dx;
        w8y += w8dy;
        w9x += w9dx;
        w9y += w9dy;

        cxt.clearRect(0, 0, canvas.width, canvas.height);
        cxt.font="20px Georgia";
        cxt.beginPath();
        var gradient=cxt.createLinearGradient(0,0,canvas.width,0);
        gradient.addColorStop("0","magenta");
        gradient.addColorStop("0.5", "blue");
        gradient.addColorStop("1.0", "red");
        cxt.fillStyle = gradient;
        cxt.fillText(word0, w0x, w0y);
        cxt.fillText(word1, w1x, w1y);
        cxt.fillText(word2, w2x, w2y);
        cxt.fillText(word3, w3x, w3y);
        cxt.fillText(word4, w4x, w4y);
        cxt.fillText(word5, w5x, w5y);
        cxt.fillText(word6, w6x, w6y);
        cxt.fillText(word7, w7x, w7y);
        cxt.fillText(word8, w8x, w8y);
        cxt.fillText(word9, w9x, w9y);
    }

});

以下是jsFiddle

中的脚本

Answer 1

首先添加以下3个功能：

/* Generates a random number */
function getRandomArbitrary(min, max) {
    return Math.random() * (max - min) + min;
}

/* Sets random position x */
function randStartX(){
    var start_x = getRandomArbitrary(0, canvas.width);
    return start_x;
}

/* Sets random position y */
function randStartY(){
    var start_y = getRandomArbitrary(0, canvas.height);
    return start_y;
}

然后改变

var w0x = start_x;
var w0y = start_y;
var w1x = start_x;
var w1y = start_y;
var w2x = start_x;
var w2y = start_y;
var w3x = start_x;
var w3y = start_y;
var w4x = start_x;
var w4y = start_y;
var w5x = start_x;
var w5y = start_y;
var w6x = start_x;
var w6y = start_y;
var w7x = start_x;
var w7y = start_y;
var w8x = start_x;
var w8y = start_y;
var w9x = start_x;
var w9y = start_y;

要

var w0x = randStartX();
var w0y = randStartY();
var w1x = randStartX();
var w1y = randStartY();
var w2x = randStartX();
var w2y = randStartY();
var w3x = randStartX();
var w3y = randStartY();
var w4x = randStartX();
var w4y = randStartY();
var w5x = randStartX();
var w5y = randStartY();
var w6x = randStartX();
var w6y = randStartY();
var w7x = randStartX();
var w7y = randStartY();
var w8x = randStartX();
var w8y = randStartY();
var w9x = randStartX();
var w9y = randStartY();

小提琴：https://jsfiddle.net/tg9gs9pe/3/

Answer 2

var start_x = Math.random() * canvas.width;
var start_y = Math.random() * canvas.height;

这给出了0和画布宽度/高度

之间的随机位置

Answer 3

您可以使用Math.random()为每个元素选择初始坐标。

来自MDN：

Math.random（）函数返回范围[0,1）中的浮点伪随机数，从0（包括）到最大但不包括1（不包括），然后您可以缩放到您想要的范围。该实现选择初始种子到随机数生成算法;它不能被用户选择或重置。

要获取特定范围内的值（例如画布高度或宽度），您可以像这样实现：

return Math.random() * (max - min) + min;

“max”和“min”是您要选择的数字的边界。对于画布，我会选择“0”作为最小值，并选择“canvas.height”或“canvas.width”作为最大值。

以下是一个示例：

function randomHeight() {
  return Math.random() * (canvas.height);
}

function randomWidth() {
  return Math.random() * (canvas.width);
}

var w0x = randomWidth();
var w0y = randomHeight();
var w1x = randomWidth();
var w1y = randomHeight();
var w2x = randomWidth();
var w2y = randomHeight();
var w3x = randomWidth();
var w3y = randomHeight();
var w4x = randomWidth();
var w4y = randomHeight();
var w5x = randomWidth();
var w5y = randomHeight();
var w6x = randomWidth();
var w6y = randomHeight();
var w7x = randomWidth();
var w7y = randomHeight();
var w8x = randomWidth();
var w8y = randomHeight();
var w9x = randomWidth();
var w9y = randomHeight();

供参考：Generate random number between two numbers in JavaScript

Answer 4

您可以将start_x和start_y更改为获取随机起始位置的函数。当你开始这个职位时，你可以调用这个职能。

var start_x = function(){ return Math.random() * canvas.width; };
var start_y = function(){ return Math.random() * canvas.height; };

更新了jsFiddle链接

启动画布绘制随机位置。多个文本绘制

4 个答案: