如何使用 Anime.js 在 HTML 画布中旋转矩形答案

【问题标题】：How to rotate rectangle in HTML canvas using Anime.js如何使用 Anime.js 在 HTML 画布中旋转矩形
【发布时间】：2017-12-15 01:07:58
【问题描述】：

我在 HTML canvas 上创建了一个矩形。我想使用 Anime.js 在这个矩形上制作 45 度旋转动画。我看过很多关于矩形旋转的帖子，但不知道如何使用 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】：

您混淆了两个不同的主题。 Anime.js 可以很好地为 dom 元素设置动画。因此，在您的情况下，您只能为完整的画布设置动画。无法在内部为矩形设置动画。这是因为 animate.js 使用了 DOM 选择器和 CSS 技术。因此，要为完整的画布设置动画，您可以指定 id

canvas id="myCanvas"></canvas>

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

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

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

【讨论】：

我明白了。我猜 Anime.js 也使用 javascript 对象来制作动画。我正在尝试使用该功能为画布内的框设置动画。不可以吗？？看到这个链接codepen.io/juliangarnier/pen/xOgyjB
在这个例子中是 HTML 和 SVG 的组合。因此，您可以从 Canvas 切换到 SVG 解决方案。