画布，蓝天白云

最新推荐文章于 2024-08-29 09:08:44 发布

5024

最新推荐文章于 2024-08-29 09:08:44 发布

阅读量372

点赞数

CC 4.0 BY-SA版权

文章标签： canvas h5 js

本文链接：https://blog.youkuaiyun.com/m0_37771093/article/details/80641537

本文介绍如何使用HTML5 Canvas绘制天空、草地及云朵等元素。通过三次贝塞尔曲线、径向渐变、线性渐变等技术，实现了丰富的视觉效果。包含绘制天空（包括太阳）、草地及多个动态云朵的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

初学画布，此次运营三次贝塞尔曲线，径向渐变，线性渐变，绘制圆弧等等。分开写了三个函数，一个绘制草原、一个绘制蓝天、一个绘制白云。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
</head>

<body>
<style>
    #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }
</style>
    <canvas id="canvas"></canvas>
    <script>
        var canvas=document.getElementById("canvas");
        var context=canvas.getContext("2d");
        canvas.width=800;
        canvas.height=600;
        context.fillStyle="white";
        context.fillRect(0,0,800,600);

        drawPrairie(context);
        drawSky(context);
        for(var i=0; i <5; i++){
            var x0 = 500 * Math.random() + 50;
            var y0 = 200 * Math.random() + 50;
            var c0 = 100 * Math.random() + 50;
            drawCloud(context, x0, y0, c0);

        }

        function drawSky(cxt) {     /画天空（太阳）/
            cxt.save();

            cxt.beginPath();
            cxt.moveTo(0,420);
            cxt.bezierCurveTo(250, 300, 350, 550, 800, 400);
            cxt.lineTo(800,0);
            cxt.lineTo(0,0);
            cxt.closePath();


            var lineStyle = cxt.createRadialGradient(400, 0, 50, 400, 0, 200);
            lineStyle.addColorStop(0,"red");
            lineStyle.addColorStop(0.3,"yellow");
            lineStyle.addColorStop(1,"#97CBff");
            cxt.fillStyle=lineStyle;
            cxt.fill();

            cxt.restore();
        }
        function drawPrairie(cxt) {  /画草地/
            cxt.save();
            cxt.beginPath();
            cxt.moveTo(0,420);
            cxt.bezierCurveTo(250, 300, 350, 550, 800, 400);
            cxt.lineTo(800,600);
            cxt.lineTo(0,600);
            cxt.closePath();
            var lineStyle=cxt.createLinearGradient(0,600,600,0);
            lineStyle.addColorStop(0, "#00AA58");
            lineStyle.addColorStop(0.3, "#93FF93");
            lineStyle.addColorStop(1, "#00EC00");
            cxt.fillStyle=lineStyle;
            cxt.fill();
            cxt.restore();

        }
        function drawCloud(cxt, cx, cy, cw) {
            //云朵移动范围即画布宽度
            var maxWidth = 800;
            //如果超过边界从头开始绘制
            cx = cx % maxWidth;
            //云朵高度为宽度的60%
            var ch = cw * 0.6;
            //开始绘制云朵

            cxt.beginPath();
            cxt.fillStyle = "white";
            //创建渐变
            var grd = cxt.createLinearGradient(0, 0, 0, cy);
            grd.addColorStop(0, 'rgba(255,255,255,0.8)');
            grd.addColorStop(1, 'rgba(255,255,255,0.5)');
            cxt.fillStyle = grd;

            //在不同位置创建5个圆拼接成云朵现状
            cxt.arc(cx, cy, cw * 0.19, 0, 360, false);
            cxt.arc(cx + cw * 0.08, cy - ch * 0.3, cw * 0.11, 0, 360, false);
            cxt.arc(cx + cw * 0.3, cy - ch * 0.25, cw * 0.25, 0, 360, false);
            cxt.arc(cx + cw * 0.6, cy, cw * 0.21, 0, 360, false);
            cxt.arc(cx + cw * 0.3, cy - ch * 0.1, cw * 0.28, 0, 360, false);
            cxt.closePath();

            cxt.fill();
        }
     </script>
</body>
</html>