用canvas实现围绕旋转动画

最新推荐文章于 2024-08-12 04:35:22 发布

安静的对折

最新推荐文章于 2024-08-12 04:35:22 发布

阅读量5.9k

点赞数

分类专栏： H5C3 文章标签： canvas convask库围绕旋转

本文链接：https://blog.csdn.net/k491022087/article/details/54429507

版权

这篇博客介绍了如何利用canvas和convask库创建一个外圈顺时针、内层逆时针的环绕旋转动画。通过代码demo链接，读者可以查看详细的实现过程和最终的动画效果。

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

使用canvas的convas来实现围绕旋转动画，外圈顺时针，里层逆时针

代码demo链接地址代码demo链接地址

html文件

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #f0f0f0;
        }
    </style>
    <script src="js/konva.js"></script>
    <script src="js/circle.js"></script>
</head>
<body>
<div id="cas"></div>

<script>
    var width = window.innerWidth;
    var height = window.innerHeight;
    //创建舞台
    var stage = new Konva.Stage({
        container: "cas",
        width: width,
        height: height
    });
    //创建层
    var layer = new Konva.Layer();
    //创建组1
    var group = new Konva.Group({
        x: stage.width() / 2,
        y: stage.height() / 2,
    });
    //最外层圆
    var circle1 = new Konva.Circle({
        x: 0,
        y: 0,
        radius: 250,
        stroke: "#ccc",
        s