canvas实现的噪点效果实例页面

展示

代码

CSS代码：

.noise {
    height: 500px;
    background-color: #333;
    position: relative;
}
.noise canvas {
    height: 100%; width: 100%;
    opacity: .2;
}
.noise::before {
    /* 边缘略暗，让界面更有质感 */
    content: '';
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    background-image: radial-gradient(rgba(0,0,0,0),rgba(0,0,0,.4));    
}
            

HTML代码：

<canvas id="nosicCanvas"></canvas>
            

JS代码：

// 参见页面源代码