HTML5画布恒星旋转

最新推荐文章于 2022-06-22 10:32:16 发布

limeiyans

最新推荐文章于 2022-06-22 10:32:16 发布

阅读量990

点赞数

分类专栏： HTML5画布恒星旋转文章标签： HTML5画布恒星旋转

本文链接：https://blog.csdn.net/limeiyans/article/details/18145987

版权

这篇博客详细介绍了如何使用HTML5的Canvas API创建一个动态的恒星旋转效果，通过监听鼠标事件来实现星星跟随鼠标的转动。

摘要由CSDN通过智能技术生成

说明:旋转鼠标的星星：

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v5.0.0-beta.js"></script>
    <script>
      function animate(animatedLayer, star, frame) {
        // 20% slow down per second
        var angularFriction = 0.2;
        var angularVelocityChange = star.angularVelocity * frame.timeDiff * (1 - angularFriction) / 1000;
        star.angularVelocity -= angularVelocityChange;

        if(star.controlled) {
          star.angularVelocity = (star.rotation() - star.lastRotation) * 1000 / frame.timeDiff;
        }
        else {
          star.rotate(frame.timeDiff * star.angularVelocity / 1000);
        }

        star.lastRota