便捷的前端绘图框架：two.js初探-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_39458856/article/details/82252810

本文介绍了two.js作为一个便捷的前端绘图框架，其动画制作以图形自身为中心旋转，不产生累加效果。通过Two.play()方法实现每秒60次的更新，而无需使用定时器。此外，two.js支持合并图形并进行操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.two.js用来做动画十分便捷，因为two.js制作的动画默认都是以自己为中心旋转

3.two.js的旋转不会造成累加效果

2. Two.js中不使用定时器，使用Two.play()方法，two.js 动画原理：调用two.play()方法，每秒调用60次,two.update() //每次调用触发一次update事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        svg,canvas{
            background-color: #4cae4c;

        }
    </style>
</head>
<body>
<h1>two.js 旋转</h1>
<div id="box"></div>
<script src="js/two.js"></script>
<script>
    var box=document.getElementById("box")
    //绘制一个2d图像
    var two =new Two({
        width :600,
        height : 600,
        type : Two.Types.svg
        }
    ).appendTo(box);
    //绘制圆形
    var c=two.makeCircle(50,50,25)
    //绘制矩形
    var r=two.makeRectangle(200,200,100,100)
    //旋转(two.js示意自己为中心，并且旋转不会累加)
    var deg=0
    two.on("update",function () {
        deg+=3
        r.rotation=deg*Math.PI/180;
    });
    two.play()

</script>
</body>
</html>

two.js可以将两个图形合并再进行操作：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        svg,canvas{
            background-color: #4cae4c;
        }
    </style>
</head>
<body>
<script src="js/two.js"></script>
<div id="box">
</div>
<script>
    var box=document.getElementById("box")
    var two=new Two({
        width:600,height:600,
        type:Two.Types.canvas
    }).appendTo(box)
    var c=two.makeCircle(100,100,50)
    var r=two.makeRectangle(100,100,200,300)
    //将两个图形作为一组
    var g=two.makeGroup(r,c)
    //平移原点
    g.translation.set(200,200);
    // g.rotation=30*Math.PI/180;
    // two.update()
    //two.js 动画原理：调用two.play()方法
    //每秒调用60次,two.update()
    //每次调用触发一次update事件
    var deg=0
    two.on("update",function () {
        deg+=3
        g.rotation=deg*Math.PI/180;
    });
    two.play()
</script>
</body>
</html>