两个画图用的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/
two.js.zip
代码语言：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
konva.min.zip
代码语言：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>门槛低小众，但很好用！
