js实现canvas空间大爆炸视觉动画效果代码
代码语言:html
所属分类:动画
代码描述:js实现空间大爆炸视觉动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; } html { height: 100%; } body { background: radial-gradient(#bbb, transparent 16%) 0 0, radial-gradient(#bbb, transparent 16%) 8px 8px, radial-gradient(rgba(0, 0, 0, 0.2) 15%, transparent 20%) 0 1px, radial-gradient(rgba(0, 0, 0, 0.2) 15%, transparent 20%) 8px 9px; background-color: #cccccc; background-size: 16px 16px; overflow: hidden; width: 100%; height: 100%; display: flex; align-items: center; } canvas { border: 30px solid #bbb; padding: 0; margin: 0; outline: none; box-shadow: 2px 20px 13px rgba(0, 0, 0, 0.75); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 600; height: 600; z-index: 0; } </style> </head> <body> <canvas id="canvas" width="600" height="600"></canvas> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script> <script> let STARS_MAX = 1800; let MAX_DEPTH = 4; let stars = new Array(STARS_MAX); let animation; let points = []; let frame = 0; this.blur = 0.03; this.speed = 0.05; this.angle = 5.0; this.surface; this.width = 600; this.height = 600; const star_image = new Image(); star_image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAACXBIWXMAAAsTAAALEwEAmpwYAAAF62lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNi4wLWMwMDIgNzkuMTY0MzUyLCAyMDIwLzAxLzMwLTE1OjUwOjM4ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCIgeG1wOkNyZWF0ZURhdGU9IjIwMTMtMTEtMjlUMTY6NTg6MTktMDU6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDIwLTA1LTExVDAwOjEzOjE3LTA0OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDIwLTA1LTExVDAwOjEzOjE3LTA0OjAwIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOmVhNGRhN2U3LTBhZDctNDFkZC1hMmI1LTNlODVhNmEyNjg1YyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoyQ0IxQTA0QTUxNjUxMUUzOTJCQkUwNzExNUQ1MDRFNSIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjJDQjFBMDRBNTE2NTExRTM5MkJCRTA3MTE1RDUwNEU1IiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9InNSR0IgSUVDNjE5NjYtMi4xIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MkNCMUEwNDc1MTY1MTFFMzkyQkJFMDcxMTVENTA0RTUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MkNCMUEwNDg1MTY1MTFFMzkyQkJFMDcxMTVENTA0RTUiLz4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6ZWE0ZGE3ZTctMGFkNy00MWRkLWEyYjUtM2U4NWE2YTI2ODVjIiBzdEV2dDp3aGVuPSIyMDIwLTA1LTExVDAwOjEzOjE3LTA0OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjEuMSAoTWFjaW50b3NoKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2.........完整代码请登录后点击上方下载按钮下载查看
网友评论0