two.js文档阅读笔记-two.js的基本使用
生活随笔
收集整理的這篇文章主要介紹了
two.js文档阅读笔记-two.js的基本使用
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
介紹
two.js是一個(gè)前端繪制2d圖形的api。可以使用svg，canvas，webgl進(jìn)行渲染。
基本使用
代碼如下：
<!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>運(yùn)行截圖如下：
代碼如下：
<!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>?運(yùn)行截圖如下：
代碼如下：
<!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>?運(yùn)行截圖如下：
?
總結(jié)
以上是生活随笔為你收集整理的two.js文档阅读笔记-two.js的基本使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： canvas笔记-arcTo的使用及绘制
- 下一篇： 信息安全工程师笔记-10种端口扫描技术概