two.js文档阅读笔记-two.js的基本使用

x33g5p2x  于2021-11-10 转载在 其他  
字(2.8k)|赞(0)|评价(0)|浏览(323)

介绍

two.js是一个前端绘制2d图形的api。可以使用svg,canvas,webgl进行渲染。

基本使用

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>two.js demo1</title>
    <script src = './lib/two.js'></script>
</head>
<body>
<div id="draw-shapes"></div>
</body>

<!-- 画基本图形 -->
<script type="text/javascript">
    function drawImg() {

        let elem = document.getElementById("draw-shapes");
        let params = {width: 285, height: 200};
        let two = new Two(params).appendTo(elem);

        let circle = two.makeCircle(72, 100, 50);
        let rect = two.makeRectangle(213, 100, 100, 100);

        circle.fill = '#FF8000';
        circle.stroke = 'orangered';
        circle.linewidth = 5;

        rect.fill = 'rgb(0, 200, 255)';
        rect.opacity = 0.75;
        rect.noStroke();

        two.update();
    }

    window.onload=function(){

        drawImg();
    }
</script>

</html>

运行截图如下:

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>two.js demo2</title>
    <script src = './lib/two.js'></script>
</head>
<body>
<div id="draw-shapes"></div>
</body>

<script type="text/javascript">

    <!-- 图形和组 -->
    function drawImg() {

        let elem = document.getElementById("draw-shapes");
        let params = {width: 285, height: 200};
        let two = new Two(params).appendTo(elem);

        let circle = two.makeCircle(-70, 0, 50);
        let rect = two.makeRectangle(70, 0, 100, 100);
        circle.fill = '#FF8000';
        circle.stroke = 'orangered';
        rect.fill = 'rgba(0, 200, 255, 0.75)';
        rect.stroke = '#1C75BC';

        let group = two.makeGroup(circle, rect);

        group.translation.set(two.width / 2, two.height / 2);
        group.rotate = Math.PI;
        group.scale = 0.75;

        group.linewidth = 7;

        two.update();
    }

    window.onload=function(){

        drawImg();
    }
</script>

</html>

运行截图如下:

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>two.js demo3</title>
    <script src = './lib/two.js'></script>
</head>
<body>
<div id="draw-shapes"></div>
</body>

<script type="text/javascript">

    <!-- motion -->
    function drawImg() {

        let elem = document.getElementById("draw-shapes");
        let params = {width: 285, height: 200};
        let two = new Two(params).appendTo(elem);

        let circle = two.makeCircle(-70, 0, 50);
        let rect = two.makeRectangle(70, 0, 100, 100);
        circle.fill = '#FF8000';
        circle.stroke = 'orangered';
        rect.fill = 'rgba(0, 200, 255, 0.75)';
        rect.stroke = '#1C75BC';

        let group = two.makeGroup(circle, rect);

        group.translation.set(two.width / 2, two.height / 2);
        group.rotate = Math.PI;
        group.scale = 0;
        group.noStroke();

        two.bind('update', function (frameCount) {

            if(group.scale > 0.9999){

                group.scale = group.rotation = 0;
            }

            let t = (1 - group.scale) * 0.125;
            group.scale += t;
            group.rotation += t * 4 * Math.PI;
        }).play();
    }

    window.onload=function(){

        drawImg();
    }
</script>

</html>

运行截图如下:

相关文章

微信公众号

最新文章

更多