JavaScript, html5：如何動態創建暈影效果？

Question

所以我需要的很簡單：用戶按下某些東西，用戶在所有頁面頂部的新 div 上看到 Vignette 效果（與頁面大小相同）

是否可以使用一些 html5 canvas 藝術？ 以及如何做這樣的事情？

Answer 1

好吧，這正是Chrome 的設置頁面的操作方式： http://jsfiddle.net/JRGHM/

.overlay {
  -webkit-box-align: center;
  -webkit-box-pack: center;
  -webkit-transition: 0.25s opacity;
  background: -webkit-radial-gradient(rgba(127, 127, 127, 0.5),
                                      rgba(127, 127, 127, 0.5) 35%,
                                      rgba(0, 0, 0, 0.7));
  bottom: 0;
  display: -webkit-box;
  left: 0;
  padding: 20px;
  padding-bottom: 130px;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 10;
}

如您所見，重要的部分是漸變。

您可以通過添加適當的漸變語法使該代碼在支持 CSS3 漸變的所有瀏覽器中工作： http://caniuse.com/#feat=css-gradients