专栏首页readmetwo.js konvas.js helloworld
原创

two.js konvas.js helloworld

两个画图用的JS框架。前端框架的名字都蛮有意思的, two.js - three.js - D3.js , canvas - konvas.js , view - vue.js ...

Two.js is a two-dimensional drawing api geared towards modern web browsers. It is renderer agnostic enabling the same api to draw in multiple contexts:svg,canvas, andwebgl.

https://two.js.org/

<!-- <script src="js/two.js" type="text/javascript" charset="utf-8"></script> -->
<script src="https://www.unpkg.com/two.js@0.7.0-stable.1/build/two.js"></script>
<div id="container"></div>
<script>
  var elem = document.getElementById('container');
  var two = new Two({ width: 285, height: 200 }).appendTo(elem);
  var circle = two.makeCircle(-70, 0, 50);
  var rect = two.makeRectangle(70, 0, 100, 100);
  circle.fill = '#FF8000';
  rect.fill = 'rgba(0, 200, 255, 0.75)';
  var group = two.makeGroup(circle, rect);
  group.translation.set(two.width / 2, two.height / 2);
  group.scale = 0;
  group.noStroke();
  // Bind a function to scale and rotate the group
  // to the animation loop.
  two.bind('update', function(frameCount) {
    // This code is called everytime two.update() is called.
    // Effectively 60 times per second.
    if (group.scale > 0.9999) {
      group.scale = group.rotation = 0;
    }
    var t = (1 - group.scale) * 0.125;
    group.scale += t;
    group.rotation += t * 4 * Math.PI;
  }).play();  // Finally, start the animation loop
</script>

Konva is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.

Konva enables high performance animations, transitions, node nesting, layering, filtering, caching, event handling for desktop and mobile applications, and much more.

You can draw things onto the stage, add event listeners to them, move them, scale them, and rotate them independently from other shapes to support high performance animations, even if your application uses thousands of shapes. https://konvajs.org/ npm install konva

<!-- <script src="js/konva.min.js" type="text/javascript" charset="utf-8"></script> -->
<script src="https://unpkg.com/konva@3.1.0/konva.js"></script>
<div id="container"></div>
<script>
    var stage = new Konva.Stage({
        container: 'container',
        width: window.innerWidth,
        height: window.innerHeight
    });
    // add canvas element
    var layer = new Konva.Layer();
    stage.add(layer);
    // create shape
    var box = new Konva.Rect({
        x: 50,
        y: 50,
        width: 100,
        height: 50,
        fill: '#00D2FF',
        stroke: 'black',
        strokeWidth: 4,
        draggable: true
    });
    layer.add(box);
    layer.draw();
    // add cursor styling
    box.on('mouseover', function() {
        document.body.style.cursor = 'pointer';
    });
    box.on('mouseout', function() {
        document.body.style.cursor = 'default';
    });
</script>

门槛低小众,但很好用!

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • AES 高级加密标准

    The Advanced Encryption Standard (AES), also known by its original name Rijndael...

    readme
  • jwt helloworld

    JSON Web Token (JWT) is an open standard (RFC 7519) that defines a compact and s...

    readme
  • Django Dev. 后台开发总结

    readme
  • 前端学习之jQuery

    [1]   jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team。

    超蛋lhy
  • 盘点2017十大科学突破,让孩子与未来相遇

    站在年尾,2017犹如白驹过隙 一年的光阴也只是人类历史间短短一瞬 我们感叹时光的飞逝 科技却让未来向我们靠近 让我们带孩子与科技遇见 一起看看 2017十大科...

    企鹅号小编
  • Mapx用xml创建点图层

         Mapx4.*中,并不支持xml,到5以后,创建ds支持xml了,听起来很美,但是,在网上居然没有找到一个说这个的,难道mapx就没人用了吗?    ...

    用户1075292
  • Git/SourceTree·查看单个文件提交记录

    陈满iOS
  • 腾讯云GAME-TECH深圳场沙龙干货回顾:实时网游的网络优化探索

    随着MOBA类游戏和全球同服游戏需求的增长,游戏厂商如何让全球玩家共同竞技无卡顿、让玩家就近接入、实现跨区吃鸡?网络延迟直接影响游戏体验,随着游戏全球化在这两年...

    腾讯游戏云
  • ICCV 2019 提前看 | 三篇论文,解读神经网络压缩

    神经网络压缩方向是目前深度学习研究的一个热门的方向,其主要的研究方向是压缩,蒸馏,网络架构搜索,量化等。在 ICCV2019 中,不少的研究单位和学者都发表了神...

    机器之心
  • 吴恩达团队发起骨骼X光片识别挑战赛,好胆你就来

    用户1737318

扫码关注云+社区

领取腾讯云代金券