Блог

Главная - Вопросы по программированию - Расстояние между прямоугольниками внутри холста в js с циклом while

Расстояние между прямоугольниками внутри холста в js с циклом while

#javascript #reactjs #canvas

Вопрос:

Мне нужно установить пространство 5 пикселей для этого «шаблона». Другими словами, 5 пикселей во всех направлениях. НО 16 прямоугольников на холсте должны быть посередине, как сейчас. Все, что мне нужно, это чтобы они находились на расстоянии друг от друга (x и y) 5 пикселей. !Важное не сработало. По какой бы то ни было причине…

Код JS:

 
    function windooflogo() {
        var c = document.getElementById("myCanvas1");
        var ctx = c.getContext("2d");
        var arrlenght= arr.length;
        var i= 0;
    
        while (i<arrlenght) {
            ctx.fillStyle = arr[i].color;
            ctx.fillRect(arr[i].x, arr[i].y, 31.25, 31.25);
            console.log(arr[i]);
            i  ;
        }
    }
        function changecolor() {
            var arr = [
                'red',
                'blue',
                'green',
                'yellow'];
                    var i = 0; i < arr.length; i  
                    var randomx = Math.floor(Math.random() * arr.length);
                    var rndcolor = arr[randomx];
                    var id = "c"   i.toString();
                    return rndcolor;
                }
    
    
    
    var arr = [];
    var rectangle = {};
    rectangle.color= changecolor();
    rectangle.x= 120;
    rectangle.y= 120;
    rectangle.fillStyle= 31;
    arr[0]=rectangle; 
    
    var rectangle={}
    rectangle.color= changecolor();
    rectangle.x= 250;
    rectangle.y= 120;
    arr[1]=rectangle;
    
    var rectangle={}
    rectangle.color= changecolor();
    rectangle.x= 120;
    rectangle.y= 250;
    arr[2]=rectangle;
    
    var rectangle={}
    rectangle.color= changecolor();
    rectangle.x= 250;
    rectangle.y= 250;
    arr[3]=rectangle;
    
    var rectangle={}
    rectangle.color= changecolor();
    rectangle.x= 120;
    rectangle.y= 151.25;
    arr[4]=rectangle; 
    
    var rectangle={}
    rectangle.color= changecolor();
    rectangle.x= 250;
    rectangle.y= 151.25;
    arr[5]=rectangle;
    
    var rectangle={}
    rectangle.color= changecolor();
    rectangle.x= 120;
    rectangle.y= 219.25;
    arr[6]=rectangle;
    
    var rectangle={}
    rectangle.color= changecolor();
    rectangle.x= 219.75;
    rectangle.y= 250;
    arr[7]=rectangle;
    
    var rectangle={}
    rectangle.color= changecolor();
    rectangle.x= 151.25;
    rectangle.y= 151.25;
    rectangle.fillStyle= 125;
    arr[8]=rectangle; 
    
    var rectangle={}
    rectangle.color= changecolor();
    rectangle.x= 219.75;
    rectangle.y= 151.25;
    arr[9]=rectangle;
    
    var rectangle={}
    rectangle.color= changecolor();
    rectangle.x= 151.25;
    rectangle.y= 250;
    arr[10]=rectangle;
    
    var rectangle={}
    rectangle.color= changecolor();
    rectangle.x= 219.75;
    rectangle.y= 219.25;
    arr[11]=rectangle;
    
    var rectangle={}
    rectangle.color= changecolor();
    rectangle.x= 151.25;
    rectangle.y= 120;
    rectangle.fillStyle= 125;
    arr[12]=rectangle; 
    
    var rectangle={}
    rectangle.color= changecolor();
    rectangle.x= 219.75;
    rectangle.y= 120;
    arr[13]=rectangle;
    
    var rectangle={}
    rectangle.color= changecolor();
    rectangle.x= 151.25;
    rectangle.y= 219.75;
    arr[14]=rectangle;
    
    var rectangle={}
    rectangle.color= changecolor();
    rectangle.x= 250;
    rectangle.y= 219.25;
    arr[15]=rectangle;
    
    var rectangle={}
    rectangle.color= changecolor();
    rectangle.x= 250;
    rectangle.y= 250;
    arr[16]=rectangle;

Htmlкод:

 
    <!DOCTYPE html>
    <html>
        <head> 
            <link rel="stylesheet" href="../CSS/Canvas.css">
            
        </head>
        <body>
            <button onclick="windooflogo()">Click me</button>
          
            <canvas id="myCanvas1" width="500px" 
             height="500px"></canvas>
        </body>
        <script src="../JS/Canvas.js"></script>
    </html>

Комментарии:

1. я понял. Больше не нужно помогать

2. Если вы нашли решение проблемы, вы можете продолжить и опубликовать ответ с описанием решения. Если вы не считаете, что эти вопросы и ответы будут полезны кому-либо еще, вы можете просто удалить вопрос, так как он еще не получил никаких ответов.

Метки: