Fatal编程技术网
  • javascript/
  • Javascript 开始画布绘制随机位置。多文本绘制

Javascript 开始画布绘制随机位置。多文本绘制

javascript jquery html canvas

Javascript 开始画布绘制随机位置。多文本绘制,javascript,jquery,html,canvas,Javascript,Jquery,Html,Canvas,我已经为我的站点创建了一个画布横幅，其中有一些编程标签在移动。工作几乎完美。只有一个问题我不能解决 所有标记都从中心开始（ofc。在我的JS文件的第23/24行，我设置了所有标记的开始位置）。我只想设置每个标记的随机起始位置。问题是我不知道如何开始 这是我的档案： HTML: Javascript（Jquery） $（函数（）{ var-word0=''； var word1=''； var word2=''； var word3=''； var word4=''； var word5=''；

我已经为我的站点创建了一个画布横幅，其中有一些编程标签在移动。工作几乎完美。只有一个问题我不能解决

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

这是我的档案：

HTML:

Javascript（Jquery）

$（函数（）{
var-word0=''；
var word1=''；
var word2=''；
var word3=''；
var word4=''；
var word5=''；
var word6=''；
var word7=''；
var word8=''；
var-word9=''；
var fps=30；
var delta=1；//可能的dx或dy变化的范围（从0开始）
var max=2；//最大dx或dy值
var jCanvas=$（“#bannerCanvas”）；
var canvas=document.getElementById（'bannerCanvas'）；
canvas.width=jCanvas.parent（）.width（）；
canvas.height=jCanvas.parent（）.height（）；
var start_x=canvas.width/2；//第23行
var start_y=canvas.height/2；//第34行
bind（“单击”，函数（）{
如果（间隔===未定义）{
间隔=窗口。设置间隔（动画，1000/fps）；
}
否则{
间隔=清除间隔（间隔）；
控制台日志（间隔）；
}
});
var cxt=canvas.getContext（'2d'）；
cxt.fillStyle='#FF0000'；
var interval=window.setInterval（动画，1000/fps）；
var w0x=start_x；
var w0y=开始时间；
var w1x=开始_x；
var w1y=开始时间；
var w2x=开始_x；
var w2y=开始时间；
var w3x=开始x；
var w3y=开始时间；
var w4x=开始x；
var w4y=开始时间；
var w5x=开始x；
var w5y=开始时间；
var w6x=开始x；
var w6y=开始时间（y）；
var w7x=开始x；
var w7y=开始时间；
var w8x=开始x；
var w8y=开始时间；
var w9x=开始x；
var w9y=开始时间；
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；
函数getWx（dx）{
var wx=（Math.random（）*delta-delta/2）；
如果（Math.abs（wx+dx）>max）{wx*=-1；}
返回wx；
}
函数getWy（dy）{
var wy=（Math.random（）*delta-delta/2）；
如果（Math.abs（wy+dy）>max）{wy*=-1；}
返回wy；
}
功能弹跳（西北、当前）{
如果（（cur+nw）<0 | |（cur+nw）>画布宽度）{
返回nw*=-1；
}
否则{
返回西北方向；
}
}
功能弹跳（西北、当前）{
如果（（cur+nw）<0 | |（cur+nw）>画布高度）{
返回nw*=-1；
}
否则{
返回西北方向；
}
}
函数animate（）{
w0dx=bounceX（w0dx+=getWx（w0dx），w0x）；
w0dy=bounceY（w0dy+=getWy（w0dy），w0y）；
w1dx=bounceX（w1dx+=getWx（w1dx），w1x）；
w1dy=弹跳（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；
clearRect（0，0，canvas.width，canvas.height）；
cxt.font=“20px格鲁吉亚”；
cxt.beginPath（）；
var gradient=cxt.createLinearGradient（0,0，canvas.width，0）；
渐变。添加颜色停止（“0”，“洋红色”）；
渐变。添加颜色停止（“0.5”，“蓝色”）；
渐变。添加颜色停止（“1.0”，“红色”）；
cxt.fillStyle=渐变；
cxt.fillText（word0，w0x，w0y）；
cxt.fillText（word1、w1x、w1y）；
cxt.fillText（word2，w2x，w2y）；
填充文本（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）；
}
});
这是我的脚本

这将在0和画布宽度/高度之间提供一个随机位置，您可以使用该位置为每个元素拾取初始坐标

从MDN：

函数的作用是：返回[0，1]范围内的浮点伪随机数，即从0（包含）到但不包括1（排除），然后可以将其缩放到所需的范围。实现会选择随机数生成算法的初始种子；用户无法选择或重置该种子

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

return Math.random() * (max - min) + min;
其中“max”和“min”是要拾取的数字的边界。 作为画布， 
#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);
}

$(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);
    }

});

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

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

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();

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

/* 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();