開始畫布繪製隨機位置。多個文字繪製

我爲我的網站創建了一個畫布橫幅，其中有一些編程標籤四處移動。工作幾乎完美。哪裏只有一個我無法解決的問題。開始畫布繪製隨機位置。多個文字繪製

所有的標籤開始在中心（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

來源

2016-06-13 Paules

感謝您的所有答案。一切都很棒。謝謝。我選了冰塊之一。那個對我來說最適合以後。 Thans – Paules

首先添加這些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/

來源

2016-06-13 20:18:09 icecub

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

這給出0之間和畫布寬度/高度

來源

2016-06-13 20:14:40 Kokodoko

可以使用Math.random()挑初始座標爲每個元素的隨機位置。

從MDN：

的的Math.random（）函數的範圍在[0返回浮點，僞隨機數，1），是從0（含）到但不包括1（獨佔），然後您可以縮放到您想要的範圍。該實施方式選擇初始種子給隨機數生成算法;它不能被用戶選擇或重置。

爲了得到一個特定範圍內的值（如畫布高度或寬度內），就可以實現這樣的：

return Math.random() * (max - min) + 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

來源

2016-06-13 20:16:10

您可以更改start_x和start_y到獲得隨機啓動位置的功能。當你創建這個職位時，你可以調用這個職能。

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

更新jsFiddle鏈接

來源

2016-06-13 20:16:53

開始畫布繪製隨機位置。多個文字繪製

回答

相關問題