城市漫游特效
代码语言:html
所属分类:背景
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> Procedural Canvas cityscape (profile header)</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { background: black; margin: 0; padding: 0; overflow: hidden; } canvas { background: transparent; background-image: linear-gradient(black 20%, #101 30%, #211 40%, #070702 52%, #000 90%, #000 100%); background-repeat: no-repeat; display: block; margin: 0 auto; width: 100%; max-width: 1800px; height: 300px; } #vignette { background-image: linear-gradient(right, black 0%, transparent 10%, transparent 90%, black 100%); position: absolute; top: 0; left: 50%; width: 100%; height: 300px; max-width: 1800px; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 50; } </style> </head> <body translate="no"> <script> // OVERENGINEERED UNOPTIMIZED CANVAS BULLSH*T // BUT IT'S OKAY SINCE IT'S BLADE RUNNER INNIT // Some stuff left unoptimized / verbose to show the work. // TODO: // - optimize render loop, avoid overdraws, etc // - smoothly fade rows in on the horizon // Constants. Change at own risk const CANVAS_WIDTH = 900; const CANVAS_HEIGHT = 300; const FRAME_TIME = 1000 / 16; const LIGHT_ROWS = 20; const LIGHT_ROW_DEPTH = 2; const LIGHT_SPACING = 0.6; const LIGHT_SIZE = 0.1; const LIGHT_SCATTER = 0.4; const BUILDING_ROWS = 38; const BUILDING_ROW_DEPTH = 1; const BUILDING_ROW_WIDTH = 60; const BUILDING_MIN_HEIGHT = 1.5; const BUILDING_MAX_HEIGHT = 3; const STACK_HEIGHT = 9; const STACK_THRESHOLD = 0.87; const STACK_LIGHT_CHANCE = 0.95; const STACK_LIGHT_SIZE = 0.13; const FADE_GRAY_VALUE = 25; const FADE_OFFSET = 0.35; // Virtual camera. Used in perspective calculations const CAMERA = { x: 0, y: 10, z: 0, fov: 170, dist: 30, zSpeed: 0.005 // Virtual vanishing point XY. Used in perspective calculations };const VP_OFS = { x: 0.5, y: 0.27 // Global hoisted vars for rendering contexts and timers };let c, ctx, output_c, output_ctx; let _t, _dt, _ft; // Seedable random number generator. // Not particularly well-distributed, but fine for this case. // Allo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0