canvas蔚蓝星空效果
分类:实例代码
canvas蔚蓝星空效果属于前端实例代码,有关更多实例代码大家可以查看。
分享一段代码实例,它利用canvas实现了蔚蓝星空效果。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; } #starrynight { background: -webkit-linear-gradient(#00111e 30%, #033d5e); background: -moz-linear-gradient(#00111e 30%, #033d5e); background: -o-linear-gradient(#00111e 30%, #033d5e); background: linear-gradient(#00111e 30%, #033d5e); overflow: hidden; } </style> </head> <body> <canvas id="starrynight"></canvas> <script> function drawing() { var c = document.getElementById('starrynight'); var ctx = c.getContext('2d'); var xMax = c.width = window.screen.availWidth; var yMax = c.height = window.screen.availHeight; var hmTimes = Math.round(xMax + yMax); for (var i = 0; i <= hmTimes; i++) { var randomX = Math.floor((Math.random() * xMax) + 1); var randomY = Math.floor((Math.random() * yMax) + 1); var randomSize = Math.floor((Math.random() * 2) + 1); var randomOpacityOne = Math.floor((Math.random() * 9) + 1); var randomOpacityTwo = Math.floor((Math.random() * 9) + 1); var randomHue = Math.floor((Math.random() * 360) + 1); if (randomSize > 1) { ctx.shadowBlur = Math.floor((Math.random() * 15) + 5); ctx.shadowColor = "white"; } ctx.fillStyle = "hsla(" + randomHue + ", 30%, 80%, ." + randomOpacityOne + randomOpacityTwo + ")"; ctx.fillRect(randomX, randomY, randomSize, randomSize); } } drawing(); </script> </body> </html>
canvas蔚蓝星空效果,这样的场景在实际项目中还是用的比较多的,关于canvas蔚蓝星空效果就介绍到这了。