javascript - JavaScript、html5:ビネット効果を動的に作成する方法は?

Question

だから私が必要とするのは簡単です: ユーザーが何かを押すと、ユーザーはすべてのページ (ページサイズ) の上にある新しい div に同様にビネット効果を見ます

一部のhtml5キャンバスアートで可能ですか? そして、そのようなことをどのように行うのですか？

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