canvas 画月亮加动画

链接https://www.cnblogs.com/liangtao999/p/11932811.html

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
 
  <title></title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
 
    #canvas {
      display: block;
      border: 1px solid #ccc;
      margin: 0 auto;
    }
  </style>
</head>
 
<body>
  <canvas id="canvas">您的浏览器不支持</canvas>
</body>
<script>
  var moon = {
    x: 100,
    y: 120
  };
 
  var canvas = document.getElementById("canvas");
  canvas.width = screen.width;
  canvas.height = screen.height;
  var ctx = canvas.getContext("2d");
 
  var time = 2000;
 
  setInterval(function () {
    if (moon.x <= canvas.width) {
      moon.x += 50;
      fillMoon(ctx, 2, moon.x, moon.y, 100, 35);
    } else {
      moon.x = 0;
    }
 
  }, time);
 
  //对月亮进行配置
  function fillMoon (ctx, d, x, y, R, rot, fillColor) //R半径，rot旋转角度
  {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
 
    var skyStyle = ctx.createRadialGradient((canvas.width / 2), canvas.height, 0, (canvas.width / 2), canvas.height - 100, 250); //（startx,starty,endx,endy）;
    skyStyle.addColorStop(0.0, "#176293"); //第一个参数为0-1之间的浮点数。表示颜色的位置
    skyStyle.addColorStop(1.0, "black");
    ctx.fillStyle = skyStyle;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
 
    ctx.save();
    ctx.translate(x, y);
    ctx.rotate(rot * Math.PI / 180);
    ctx.scale(50, 50); //context.scale(scalewidth,scaleheight);放大倍数
    PathMoon(ctx, d);
    ctx.fillStyle = fillColor || "#fb5";
    ctx.fill();
    ctx.restore();
 
    //绘制星空
    for (var i = 0; i < 50; i++) {
      var r = Math.random() * 5 + 1; //10-20
      var rot = Math.random() * 360;
      var x = Math.random() * canvas.width + 3;
      var y = Math.random() * canvas.height * 0.65 + 5;
      drawStar(ctx, x, y, r, rot);
    }
 
  }
  //绘制月亮
  function PathMoon (ctx, d) {
    ctx.beginPath();
    ctx.arc(0, 0, 1, 0.5 * Math.PI, 1.5 * Math.PI, true);
    ctx.moveTo(0, -1);
    ctx.arcTo(d, 0, 0, 1, dis(0, -1, d, 0) / d);
    ctx.closePath();
  }
 
  function dis (x1, y1, x2, y2) {
    return Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));
  }
 
  //对星星状态进行设置
  function drawStar (ctx, x, y, r, rot) {
    ctx.save(); //保存ctx状态
    ctx.translate(x, y); //移动
    ctx.rotate(rot / 180 * Math.PI); //旋转角度
    starPath(ctx, r);
 
    ctx.fillStyle = "#fb3";
    ctx.strokeStyle = "#fd5"
    ctx.lineWidth = 3;
    ctx.lineJoin = "round";
    ctx.fill();
    ctx.stroke();
 
    ctx.restore(); //回到之前ctx的状态
  }
  //封装五角星函数
  function starPath (ctx, r) {
    ctx.beginPath();
    for (var i = 0; i < 5; i++) {
      ctx.lineTo(Math.cos((18 + i * 72) / 180 * Math.PI) * r, -Math.sin((18 + i * 72) / 180 * Math.PI) * r);
      ctx.lineTo(Math.cos((54 + i * 72) / 180 * Math.PI) * (r / 2), -Math.sin((54 + i * 72) / 180 * Math.PI) * (r / 2));
    }
    ctx.closePath();
  }
</script>
 
</html>

　　

posted @   枫若  阅读(76)  评论(0)  编辑  收藏  举报
相关博文：
·  jquery+canvas画日历
·  vue-quill-editor 图片上传处理
·  Canvas
·  使用canvas制作一个卡通的月饼
·  自己画icon
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· AI与.NET技术实操系列（六）：基于图像分类模型对图像进行分类
点击右上角即可分享
微信分享提示
SQL AI 助手