two.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.
<!-- <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>门槛低小众，但很好用！
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。