javascript - 我应该如何绘制 "Flower of Life"作为动态大小网页的背景？

Question

我想要生命之花，就像这个:https://jsfiddle.net/5ak8P

var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d'),
    compass = new Compass(context, 25, 25, 8),
    flower = [
        { x:  0.00, y:  0 },
        { x: -0.00, y: -2 },
        { x: -1.75, y: -1 },
        { x: -1.75, y: +1 },
        { x: +0.00, y: +2 },
        { x: +1.75, y: +1 },
        { x: +1.75, y: -1 }
    ];

for (var i = 0; i < 7; ++i) (function (i) {
    var x = flower[i].x,
        y = flower[i].y,
        compass = new Compass(context, 6*x + 25, 6*y + 25, 8);
    
    setTimeout(function () {
        for (var i = 0; i < 7; ++i) (function (i) {
            var x = flower[i].x,
                y = flower[i].y;
            
            setTimeout(function () {
                compass.draw(3*x, 3*y, 6);
            }, 100*i);
        }) (i);
    }, 700*i + 700);
}) (i);

setTimeout(function () { compass.draw(0, 0, 6*3); }, 6*1000);

<script src="https://jackvsworld.github.io/static/js/compass.js"></script>
<canvas id="canvas" width="500" height="400"></canvas>

但是，我希望它位于填充我的索引页面背景的 Canvas 上。我希望它能够动态适应。

Answer 1

您可以尝试将以下 CSS 样式添加到 canvas 元素:

canvas {
  width: 100vw;
  height: 100vh;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}

这应该可以解决问题。

注意:

width: 100vw;
height: 100vh;

表示视口(viewport)宽度和高度的 100%；如果它不适合您的页面内容，请尝试对两者都设置 100%，或者根据当前页面或视口(viewport)比率(根据需要)使用 JS 动态更改它们。例如:将此添加到 JS:

window.addEventListener('resize',resizeCanvas,false);

function resizeCanvas(){
    var canvas = document.getElementById('canvas');
    canvas.height = window.innerHeight;
    canvas.width = window.innerWidth;
    drawFlower();
}

然后将绘图包装在 drawFlower 函数中:

var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d'),
    compass = new Compass(context, 25, 25, 8),
    flower = [
        { x:  0.00, y:  0 },
        { x: -0.00, y: -2 },
        { x: -1.75, y: -1 },
        { x: -1.75, y: +1 },
        { x: +0.00, y: +2 },
        { x: +1.75, y: +1 },
        { x: +1.75, y: -1 }
    ];
drawFlower();

function drawFlower() {
    for (var i = 0; i < 7; ++i) (function (i) {
        var x = flower[i].x,
            y = flower[i].y,
            compass = new Compass(context, 6*x + 25, 6*y + 25, 8);

        setTimeout(function () {
            for (var i = 0; i < 7; ++i) (function (i) { 
                var x = flower[i].x,
                    y = flower[i].y;

                setTimeout(function () {
                    compass.draw(3*x, 3*y, 6);
                }, 100*i);
            }) (i);
        }, 700*i + 700);
    }) (i);

    setTimeout(function () { compass.draw(0, 0, 6*3);   }, 6*1000);
}

(是的，您仍然需要更改花的数学以获得漂亮的花...)