canvas实现拨开云雾见太阳光芒四射晚霞逼真动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：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().
    //
    // Sidenote: this is a clear violation of JS1K rules, which is why it's very important not to read them
    // before the competition is over.

    // A(top)

    // Now, since our demo is fairly heavy we use a small canvas, but we want it to be fullscreen on a
    // black background, so we waste ~90 bytes on some CSS to stretch it (currently "object-fit:contain"
    // doesn't work for canvas on MS browsers).
    //
    // To avoid wasting 90 bytes just on this, we take this opportunity to define P and Q as 'width' and
    // 'height' for later. This is probably a mistake since I ended up packing it with regpack anyway.
    //
    // The weird bit at the end is an ES6 template literal being abused to call the array's join method
    // with something that will be coerced into the string ':100%;'.

    // a.style=[P='width',Q='height','object-fit:contain;background:#000'].join`:100%;`

    canvas.style = 'width: 100%; height: 100%; object-fit:contain; background:#000;';

    // Now we need a frame counter.

    // t=0

    let frame = 0;

    // B() is the requestAnimationFrame callback.

    // B=_=>{

    function onFrame() {
        // Set width and height on our canvases, we'll be using a smaller canvas for the godrays. This
        // also clears and resets their states. While we're at it, we'll store their dimensions in one
        // letter vars for later.

        // w=a[P]=512
        // h=a[Q]=256
        // W=E[P]=128
        // H=E[Q]=64

        canvas.width = 512;
        canvas.height = 256;
        godraysCanvas.width = 128;
        godraysCanvas.height = 64;

        // Set the sun's vertical position.

        // T=C(t++/w)*24

        let sunY = Math.cos(frame++ / 512) * 24; // This is actually the offset from the middle of the canvas.

        // Get the 2D context for our godrays canvas, and create abbreviations for all the context properties.

        // A(F=E.getContext`2d`)

        let godraysCtx = godraysCanvas.getContext('2d');

        // N.........完整代码请登录后点击上方下载按钮下载查看