two.js文档阅读笔记-two.js的基本使用- 前端开发

介绍

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>

运行截图如下：

关键词搜索

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

详情内容

相关技术文章

最新源码

下载排行榜

提示信息

选择支付方式