如何向新組件添加框陰影

Question

我正在制作一種輕飄飄的小鳥游戲，並根據Math.random()將柱子制作為以不同長度出現的new components 。 但即使我可以改變這些柱子的 colors 我真的想在它們上添加一個盒子陰影，只是為了讓它看起來很酷。 這不是真的必要。 因此，如果有人可以讓我知道我是否可以向組件添加 box-shadow 也會有所幫助。 如果您想看一下，這是柱子的代碼：

    if (myGameArea.frameNo == 1 || everyinterval(150)) {
        x = myGameArea.canvas.width;
        minHeight = 60;
        maxHeight = 100;
        height = Math.floor(Math.random()*(maxHeight-minHeight+1)+minHeight);
        minGap = 60;
        maxGap = 200;
        gap = Math.floor(Math.random()*(maxGap-minGap+1)+minGap);
        myObstacles.push(new component(10, height, "lightgray", x, 0));
        myObstacles.push(new component(10, x - height - gap, "gray", x, height + gap, "box-shadow: 0px 0px 10px white;")); // on black background
    }

Answer 1

由於您使用 js 而不是 HTML/CSS 創建這些，因此您需要使用shadowColor shadowOffsetX shadowOffsetY shadowBlur

參考https://www.w3resource.com/html5-canvas/html5-canvas-shadow.php