Konva系列---【使用Konva實現2d效果】
阿新 • • 發佈：2022-03-22
<!DOCTYPE html> <html lang="en"> <head> <!-- 引入Konva --> <script src="https://unpkg.com/[email protected]/konva.min.js"></script> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Konva</title> <style> body { margin: 0; padding: 0; overflow: hidden; background-color: #f8f8f8; } </style> </head> <body> <div id="box"></div> <script> varwidth = window.innerWidth; var height = window.innerHeight; // 第一步，建立一個stage舞臺 var stage = new Konva.Stage({ container: 'box', width: width, height: height }); // 第二步，建立一個layer圖層 var layer = new Konva.Layer(); // 第三步，建立一個或者多個圖形// 這裡是建立矩形 var rect = new Konva.Rect({ x: 100, y: 100, width: 100, height: 50, fill: 'green', stroke:'block', strokeWidth: 4 }) // 第四步，將圖形新增到圖層中，add() layer.add(rect) // 第五步，將圖層新增到stage舞臺中 stage.add(layer) </script> </body> </html>