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(.........完整代码请登录后点击上方下载按钮下载查看

网友评论0