HTML5畫布kineticjs SVG路徑教程，看到一個比較有趣的！
阿新 • • 發佈：2019-02-15
建立與KineticJS SVG路徑,我們可以例項化一個動態路徑()物件。路徑是最常用的,當我們想出口一個SVG路徑進入一個HTML5 Canvas路徑,或如果我們想展現複雜的圖紙作為資料字串,而不是建立一個自定義形狀。列出了完整的屬性和方法,看看動能。路徑檔案。
<!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </head> <body> <div id="container"></div> <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.0.min.js"></script> <script defer="defer"> var stage = new Kinetic.Stage({ container: 'container', width: 578, height: 200 }); var layer = new Kinetic.Layer(); var path = new Kinetic.Path({ x: 240, y: 40, data: 'M12.582,9.551C3.251,16.237,0.921,29.021,7.08,38.564l-2.36,1.689l4.893,2.262l4.893,2.262l-0.568-5.36l-0.567-5.359l-2.365,1.694c-4.657-7.375-2.83-17.185,4.352-22.33c7.451-5.338,17.817-3.625,23.156,3.824c5.337,7.449,3.625,17.813-3.821,23.152l2.857,3.988c9.617-6.893,11.827-20.277,4.935-29.896C35.591,4.87,22.204,2.658,12.582,9.551z', fill: 'green', scale: 2 }); // add the shape to the layer layer.add(path); // add the layer to the stage stage.add(layer); </script> </body> </html>