Показать сообщение отдельно
  #5 (permalink)  
Старый 26.09.2020, 18:55
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Alena_03,
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
#canvas {
   background-color: #F4F4F4;
}
#canvas-container{
    text-align: center;
}

    </style>
</head>

<body>
<div id="canvas-container">
    <canvas id="canvas" width="400" height="400" ></canvas>
</div>

    <script>
var elem = document.getElementById('canvas');
var ctx = elem.getContext('2d');
var width = elem.width,
    distance = 100, // размер квадрата
    padding = 65; // расстояние между квадратами
var x = (width - distance) / 2;
var y = (width - distance * 2 - padding) / 2;
var y2 = y + padding + distance;

ctx.fillStyle = 'green';
ctx.fillRect(x, y, distance, distance);

ctx.fillStyle = 'red';
ctx.fillRect(x, y2, distance, distance);

distance = 300; // размер сетки
var d = 15; // размер ячейки
var m = (d/2|0) + .5;
var k = (width - distance) / 2 + m;
var endDistance = k + distance - m;

for (var x = k; x < endDistance ; x += d) {
    ctx.moveTo(x, k - m);
    ctx.lineTo(x, endDistance);
    ctx.moveTo(k - m , x );
    ctx.lineTo(endDistance, x );
}

ctx.strokeStyle = '#3300FF';
ctx.stroke();
    </script>

</body>
</html>

Последний раз редактировалось рони, 27.09.2020 в 14:44.
Ответить с цитированием