前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >two.js konvas.js helloworld

two.js konvas.js helloworld

原创
作者头像
vanguard
修改2020-03-10 17:50:18
11.5K0
修改2020-03-10 17:50:18
举报
文章被收录于专栏:vanguard

两个画图用的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/

代码语言:javascript
复制
<!-- <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

代码语言:javascript
复制
<!-- <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>

门槛低小众,但很好用!

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

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

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

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档