个人中心
gpt4 book ai didi

javascript - 开始 Canvas 绘制随机位置。多个文本绘制

转载 作者：行者123 更新时间：2023-11-30 16:00:44 27 4
gpt4 key购买 nike

我为我的站点创建了一个 Canvas 横幅，其中有一些移动的编程标签。工作近乎完美。只有一个问题我解决不了。

所有标签都从中心开始(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 中的脚本

最佳答案

首先添加这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();

fiddle :https://jsfiddle.net/tg9gs9pe/3/

关于javascript - 开始 Canvas 绘制随机位置。多个文本绘制，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37798181/

27 4 0
文章推荐： JavaScript:requestAnimationFrame 变得更快
文章推荐： c# - 避免有细微差别的重复循环
文章推荐： c# - 将 VS 项目文件的副本提供给其他开发人员
文章推荐： javascript - 使用 jsdom 更改 HTML 标签
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com