canvas实现拨开云雾见太阳光芒四射晚霞逼真动画效果代码
代码语言:html
所属分类:动画
代码描述:canvas实现拨开云雾见太阳光芒四射晚霞逼真动画效果代码
代码标签: canvas 拨开 云雾 太阳 光芒 四射 晚霞 逼真 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style> html, body { height: 100%; width: 100%; margin: 0; padding: 0; border: 0; overflow: hidden; } </style> </head> <body> <canvas></canvas> <script> // Currently in Chrome you need to click the "Get Adobe Flash" button so it'll ask you if you want to // allow flash to run. // The rest of this is formatted as: // // Explanation of the compressed code // // ... // // // Commented out, compressed code // // Readable (more or less) version of the code // ... document.addEventListener("DOMContentLoaded", go); function go() { "use strict"; // JS1K's HTML shim gives us a canvas (a) and its 2D context (c) for free. We'll set them up here. let canvas = document.querySelector('canvas'); let ctx = canvas.getContext('2d'); // First off - we define an abbreviation function. This takes an object, iterates over its properties // and stores their names as strings in a 2 or 3 letter variable ("this" is the window object). // // p[0]+p[6] will evaluate to the 1st and 7th letter (or the 1st+"undefined" if there's no 7th), // [p[20]] will be an empty string if the property's name is too short ([undefined] gets coerced to // an empty string). // // This is a variation on Marijn Haverbeke's technique - see https://marijnhaverbeke.nl/js1k/ // // We won't be using it in the readable version of the demo. // A=o=>{for(p in o)this[p[0]+p[6]+[p[20]]]=p} // Next we abbreviate all the properties in our window object because requestAnimationFrame() is // kind of long. We can't call A(window) because it will try to abbreviate all our abbreviations (since // it stores them in the window object) so we'll use it on "top" which has the same properties. // We really just need a shorter requestAnimationFrame(). // // S.........完整代码请登录后点击上方下载按钮下载查看
网友评论0