Canvas学习，使用Canvas绘制简单动画夜景图

最新推荐文章于 2023-04-29 20:38:02 发布

My_soul_love

最新推荐文章于 2023-04-29 20:38:02 发布

阅读量325

点赞数

文章标签：动画学习 css3

本文链接：https://blog.csdn.net/qq_45263880/article/details/124922498

版权

Canvas学习，使用Canvas绘制简单动画夜景图

使用canvas绘制简单的动画夜景图，步骤如下：
1.设置线性渐变颜色，绘制星空背景
2.使用三次贝塞尔曲线绘制山坡
3.绘制星星，使用线条绘制
4.绘制月亮，使用二次贝塞尔曲线和圆弧绘制

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>绘制简单动画夜景图</title>
    <style>
      canvas {
        border: 1px solid #ddd;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
      }
    </style>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <script>
      var canvas = document.getElementById("canvas");
      canvas.width = 1000;
      canvas.height = 600;
      function draw() {
        if (canvas.getContext) {
          var ctx = canvas.getContext("2d");
          // 设置星空线性渐变颜色
          var gradient1 = ctx.createLinearGradient(0, 0, 500, 500);
          gradient1.addColorStop(0, "#010509");
          // gradient1.addColorStop(.5, 'green');
          gradient1.addColorStop(1, "#00163e");
          ctx.fillStyle = gradient1;
          // 填充星空背景
          ctx.fillRect(0, 0, 1000, 600);
          ctx.fill();

          //三次贝塞尔曲线
          ctx.beginPath();
          ctx.moveTo(0, 600);
          // 使用三次贝塞尔曲线绘制山峰轮廓
          ctx.bezierCurveTo(75, 200, 200, 400, 1000, 600);
          ctx.stroke();
          // 设置山峰颜色
          var gradient = ctx.createLinearGradient(300, 600, 300, 300);
          gradient.addColorStop(0, "green");
          gradient.addColorStop(0.3, "green");
          gradient.addColorStop(1, "yellow");
          ctx.fillStyle = gradient;
          // 填充山峰颜色
          ctx.fill();
          ctx.closePath();

          // 绘制第二个山峰
          ctx.beginPath();
          ctx.moveTo(0, 600);
          ctx.bezierCurveTo(900, 100, 450, 400, 1000, 600);
          ctx.stroke();
          // var gradient1 = ctx.createLinearGradient(300, 500, 300, 300)
          // gradient1.addColorStop(0, 'green');
          // gradient1.addColorStop(.5, 'green');
          // gradient1.addColorStop(1, 'yellow');
          ctx.fillStyle = gradient;
          ctx.fill();
          ctx.closePath();
        }
      }
      draw();
      // 绘制星星
      function drawStar() {
        if (canvas.getContext) {
          let ctx = canvas.getContext("2d");
          for (let i = 0; i < 100; i++) {
            let x = Math.random() * 1000;
            let y = Math.random() * 250;
            ctx.beginPath();
            ctx.moveTo(x, y);
            ctx.lineTo(x + 4, y - 2);
            ctx.lineTo(x + 6, y - 6);
            ctx.lineTo(x + 8, y - 2);
            ctx.lineTo(x + 12, y);
            ctx.lineTo(x + 8, y + 2);
            ctx.lineTo(x + 6, y + 6);
            ctx.lineTo(x + 4, y + 2);
            ctx.lineTo(x, y);
            ctx.fillStyle = "#fff";
            ctx.fill();
            ctx.closePath();
          }
        }
      }
      drawStar();
      // 绘制月亮
      function drawMoon() {
        if (canvas.getContext) {
          let ctx = canvas.getContext('2d')
          ctx.beginPath()
          let a = parseInt(40*Math.cos(Math.PI/6))
          ctx.moveTo(800-a,80-20)
          // 使用二次贝塞尔曲线绘制月亮内弧
          ctx.quadraticCurveTo(770, 110, 800+20, 80+a);
          // 使用圆弧绘制月亮外弧
          ctx.arc(800,80,40,Math.PI/3,Math.PI+Math.PI/6)
          ctx.strokeStyle = '#eee'
          ctx.fill()
          ctx.stroke()
        }
      }
      drawMoon()
    </script>
  </body>
</html>