个人中心
gpt4 book ai didi

javascript - 使用javascript创建具有随机颜色的随机矩形而不重叠

转载 作者：搜寻专家 更新时间：2023-10-31 08:16:04 25 4
gpt4 key购买 nike

如何使用 javascript 在 HTML 中创建类似的内容？ enter image description here

实际上我知道如何在 HTML 中创建矩形，但我想做这样的事情。 HTML Canvas 可以是任何大小，但每当加载页面时，都会生成多个随机大小和颜色的正方形，而不会重叠。当我尝试这样做时，矩形以列表形式生成。我是一名网络开发人员(面向 ruby​​ on rails)，但对此类 javascript 内容还不熟悉。任何帮助将不胜感激。

HTML:

<body>
    <div id="randBlock" >
    </div>
</body>

JavaScript:

(function makeDiv(){
    var divsize = ((Math.random()*100) + 50).toFixed();
    var color = '#'+ Math.round(0xffffff * Math.random()).toString(16);
    $newdiv = $('#randBlock').css({
        'width':divsize+'px',
        'height':divsize+'px',
        'background-color': color
    });

    var posx = (Math.random() * ($(document).width() - divsize)).toFixed();
    var posy = (Math.random() * ($(document).height() - divsize)).toFixed();

    $newdiv.css({
        'position':'absolute',
        'left':posx+'px',
        'top':posy+'px',
        'display':'none'
    }).appendTo( 'body' ).fadeIn(100).delay(300).fadeOut(200, function(){
       $(this).remove();
       makeDiv(); 
    }); 
})();

最佳答案

使用 Canvas 的解决方案(所以我理解了这个问题)。

内置碰撞检测 isInside()。

编辑:更好的随机支持，不会永远运行，来自 Drawing a 1px thick line in canvas creates a 2px thick line 的提示和这个答案的一点点 Random Color generator in Javascript 

function getRandomColor() {
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += (Math.random() * 16 | 0).toString(16);
    }
    return color;
}

function Point(x, y) {
    this.x = x;
    this.y = y;
}

function Rectangle(p1, p2) {
    this.p1 = p1;
    this.p2 = p2;
}

Rectangle.prototype.isInside = function (r) {
    function check(a, b) {
        return (
            a.p1.x <= b.p1.x && b.p1.x <= a.p2.x && a.p1.y <= b.p1.y && b.p1.y <= a.p2.y ||
            a.p1.x <= b.p2.x && b.p2.x <= a.p2.x && a.p1.y <= b.p2.y && b.p2.y <= a.p2.y ||
            a.p1.x <= b.p2.x && b.p2.x <= a.p2.x && a.p1.y <= b.p1.y && b.p1.y <= a.p2.y ||
            a.p1.x <= b.p1.x && b.p1.x <= a.p2.x && a.p1.y <= b.p2.y && b.p2.y <= a.p2.y
        );
    }
    return check(this, r) || check(r, this);
}

function generateRectangles() {
    function p() { return Math.random() * 300 | 0; }
    function s() { return 50 + Math.random() * 150 | 0; }

    var rectangles = [],
        r, size, x, y, isInside, i, counter = 0;

    for (i = 0; i < 20; i++) {
        counter = 0;
        do {
            counter++;
            x = p();
            y = p();
            size = s();
            r = new Rectangle(new Point(x, y), new Point(x + size, y + size));
            isInside = rectangles.some(function (a) {
                return a.isInside(r);
            });
        } while (isInside && counter < 1000);
        counter < 1000 && rectangles.push(r);
    }
    return rectangles;
}

function drawRectangles(rectangles) {
    var canvas = document.getElementById("canvas"),
        ctx = canvas.getContext("2d");

    rectangles.forEach(function (a) {
        ctx.lineWidth = 1;
        ctx.strokeRect(a.p1.x + 0.5, a.p1.y + 0.5, a.p2.x - a.p1.x - 1, a.p2.y - a.p1.y - 1);
        ctx.fillStyle = getRandomColor();
        ctx.fillRect(a.p1.x + 0.5, a.p1.y + 0.5, a.p2.x - a.p1.x - 1, a.p2.y - a.p1.y - 1);
    });
}

var rectangles = generateRectangles();
drawRectangles(rectangles);
<canvas id="canvas" width="500" height="500"></canvas>

关于javascript - 使用javascript创建具有随机颜色的随机矩形而不重叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35435345/

25 4 0
文章推荐： swift - 为什么结构在 Swift 中不像类那样有析构器？
文章推荐： java - 有没有类似 cmake for Java 的工具？
文章推荐： swift - 如何识别用户是否点击了使用 ARKit 显示在屏幕上的对象 - swift
文章推荐： 持续时间的 Java pretty-print
搜寻专家
个人简介

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

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