文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用Anime.js在超文本标记语言画布中旋转矩形

问如何使用Anime.js在超文本标记语言画布中旋转矩形
EN

Stack Overflow用户

提问于 2017-07-11 14:06:17

回答 1查看 1.6K关注 0票数 1

我已经在超文本标记语言canvas上创建了一个矩形。我想有一个45度旋转动画在这个矩形上使用Anime.js。我已经看过很多关于矩形旋转的帖子了，但是不知道如何使用Anime.js来旋转它。下面是我的<body>标签：

<body class="container">

<canvas></canvas>

<script src="anime.min.js" type="text/javascript"></script>
<script>

    document.addEventListener('DOMContentLoaded', function () {

        var canvas = document.querySelector('canvas');
        canvas.width = 1280;
        canvas.height = 720;

        var c = canvas.getContext('2d');

        //Create box
        function Box(size) {
            var box = {};
            box.size = size;
            box.x = 640 - (box.size/2);
            box.y = 250 - (box.size/2);
            box.translateX = 0;
            box.translateY = 0;
            box.degree = 0;
            box.color = "#ffffff";
            box.draw = function () {
                c.save();
                c.fillStyle = box.color;
                c.translate(box.translateX, box.translateY);
                c.rotate(box.degree * Math.PI/180);
                c.fillRect(box.x, box.y, box.size, box.size);
                c.restore();
            };
            return box;
        }
        var box = new Box(300);
        box.draw();

        anime.timeline().add({
            targets: box,
            x: -100,
            y: -125,
            translateX: 640,
            translateY: 250,
            degree: 45,
            duration: 1000
        })
    });


</script>
</body>

有人能帮帮忙吗？

javascript

html

animation

canvas

回答 1

Stack Overflow用户

发布于 2017-07-11 14:34:36

你混淆了两个不同的主题。Anime.js很适合用来制作dom元素的动画。因此，在您的情况下，只能对整个画布进行动画处理。无法对内部的矩形进行动画处理。这是因为animate.js使用了DOM选择器和CSS技术。因此，要为整个画布设置动画效果，您可以指定id

canvas id="myCanvas"></canvas>

在java-script代码中，仅更改目标

        anime.timeline().add({
             targets: '#myCanvas',

另一种方法是在画布上自己绘制旋转的矩形。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/45026602

复制

相似问题

问如何使用Anime.js在超文本标记语言画布中旋转矩形
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用Anime.js在超文本标记语言画布中旋转矩形EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用Anime.js在超文本标记语言画布中旋转矩形
EN