js实现canvas绘画雾气多彩山川远景效果代码-html代码-BFW代码库

js实现canvas绘画雾气多彩山川远景效果代码

代码语言：html

代码描述：js实现canvas绘画雾气多彩山川远景效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html lang="en">
<head>

    <meta charset="UTF-8">



    <style>
        body {
            margin: 0;
            height: 100vh;
        }
    </style>




</head>

<body>
    <div style="height: 100vh; width: 100vw; background: #E1FF00">
        <canvas id="canvasDemo" width="1122" height="659">
            Sorry, your browser does not support canvas.
        </canvas>
    </div>



    <script>
        var canvas = document.getElementById("canvasDemo");
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        var ctx = canvas.getContext("2d");

        var w = window.innerWidth;
        var h = window.innerHeight;

        ctx.lineWidth = 0;

        var lingrad = ctx.createLinearGradient(500, 300, 500, 1000);

        lingrad.addColorStop(0, "#00bb8d");
        lingrad.addColorStop(1, "#00FF9E");

        ctx.fillStyle = lingrad;
        var prevX = 0;
        var prevY = h - 550;
        ctx.moveTo(0, prevY);
        while (prevX < w) {
            prevX = cragX(prevX);
            prevY = cragY(prevY);
            ctx.lineTo(prevX, prevY);
        }
        ctx.lineTo(w, h);
        ctx.lineTo(0, h);

        ctx.fill();

        ctx.closePath();
        ctx.beginPath();

        ctx.fillStyle = "rgba(255, 255, 255, .1)";
        var prevX = 0;
        var prevY = h - 400;
        ctx.moveTo(0, prevY);
        while (prevX < w) {
            let prePreX = prevX;
            prevX = cragX(prevX);
            prevY = cragY(prevY);
            ctx.arc(prevX, prevY, prevX - prePreX, 0, Math.PI, true);
        }
        ctx.lineTo(w, h);
        ctx.lineTo(0, h);

        ctx.fill();

        ctx.closePath();
        ctx.beginPath();

        lingrad = ctx.createLinearGradient(500, 400, 500, 1000);

        lingrad.addColorStop(0, "#00888d");
        lingrad.addColorStop(1, "#00FF9E");

        ctx.fillStyle = lingrad;
        var prevX = 0;
        var prevY = h - 450;
        ctx.moveTo(0, prevY);
        while (prevX < w) {
            prevX = cragX(prevX);
            prevY = cragY(prevY);
            ctx.lineTo(prevX, prevY);
        }
        ctx.lineTo(w, h);
        ctx.lineTo(0, h);

        ctx.fill();

        ctx.closePath();
        ctx.beginPath();

        lingrad = ctx.createLinearGradient(900, 400, 900, 1000);

        lingrad.addColorStop(0, "rgba(181, 195, 201, 0.1)");
        lingrad.addColorStop(1, "rgba(245, 250, 255, .1)");

        ctx.fillStyle = lingrad;
        var prevX = 0;
        var prevY = h - 300;
        ctx.moveTo(0, prevY);
        while (prevX < w) {
            let prePreX = prevX;
            prevX = cragX(prevX);
            prevY = cragY(prevY);
            ctx.arc(prevX, prevY, prevX - prePreX, 0, Math.PI, true);
        }
        ctx.lineTo(w, h);
        ctx.lineTo(0, h);

        ctx.fill();

        ctx.closePath();
        ctx.beginPath();

        lingrad = ctx.createLinearGradient(500, 500, 500, 1000);

        lingrad.addColorStop(0, "#0d00bb");
        lingrad.addColorStop(1, "#1E00FF");

        ctx.fillStyle = lingrad;
        var prevX = 0;
        var prevY = h - 350;
        ctx.moveTo(0, prevY);
        while (prevX < w) {
            prevX = cragX(prevX);
            prevY = cragY(prevY);
            ctx.lineTo(prevX, prevY);
        }
        ctx.lineTo(w, h);
        ctx.lineTo(0, h);

        ctx.fill();

        ctx.closePath();
        ctx.beginPath();

        lingrad = ctx.createLinearGradient(900, 500, 900, 1000);

        lingrad.addColorStop(0, "rgba(180, 196, 202, 0.1)");
        lingrad.addColorStop(1, "rgba(235, 245, 245, .1)");

        ctx.fillStyle = lingrad;
 .........完整代码请登录后点击上方下载按钮下载查看