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>运行截图如下：
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://blog.csdn.net/qq78442761/article/details/120839010
内容来源于网络，如有侵权，请联系作者删除！