插入框阴影隐藏在填充矩形上

Question

我有一个 canvas 并且有一个插入框阴影。然而，框阴影显示得很好，但每次使用 requestAnimationFrame 调用 fillRect 时，它都会被隐藏。

我尝试在fillrect之后再次设置box shadow，但仍然没有很好的效果

这是一个代码笔link：https://codepen.io/asiancat54x/pen/ExXNLzj

这是片段

const canvas = document.querySelector("canvas")
const c = canvas.getContext("2d")

canvas.width = innerWidth

canvas.height = innerHeight

function a(){
  c.fillRect(0 , 0 , canvas.width , canvas.height)
  
  canvas.boxShadow = "box-shadow: inset 0 0 60px 5px red, 3px 3px 5px 0 red;"

  requestAnimationFrame(a)
}

a()

.header {
  background-color: #2e3440;
  box-shadow: inset 0 0 60px 5px red,
    3px 3px 5px 0 red;
  height: 500px;
  width: 500px;
}

This is with a div element

<div class="header"></div>

Cannot create such box shadow on canvas

<br>

<canvas class="header"></canvas>

Answer 1

我不确定为什么 canvas 上的 Inset Box Shadow 不起作用。

但我很快创建了一个 hack。看看这是否适合你。它基本上在具有透明背景但有框阴影的 canvas 上绘制了 DIV 以及 canvas 和 DIV。 https://codepen.io/hariom_balhara/pen/RwgoJRQ

const canvas = document.querySelector("canvas")
const c = canvas.getContext("2d")
c.fillStyle='green'
canvas.width = innerWidth

canvas.height = innerHeight

function a(){
  c.fillRect(0 , 0 , canvas.width , canvas.height)
  
  canvas.boxShadow = "box-shadow: inset 0 0 60px 5px red, 3px 3px 5px 0 red;"

  requestAnimationFrame(a)
}

a()

.header {
  position:absolute;
  background-color: #2e3440;
  box-shadow: inset 0 0 60px 5px red,
    3px 3px 5px 0 red;
  height: 500px;
  width: 500px;
}

This is with a div element



Cannot create such box shadow on canvas

<br>
<div style="position:relative">
  <div class="header" style="z-index:1;background:transparent"></div>
  <canvas class="header">  </canvas>
</div>

插入框阴影隐藏在填充矩形上

Inset Box Shadow Gets Hidden On Filling Rect

javascript

html5-canvas