<!DOCTYPE html> <html lang="en"> <head> <!-- 引入Konva --> <script src="https://unpkg.com/konva@4.0.0/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> var width = window.innerWidth; var height = window.innerHeight; // 第一步，创建一个stage舞台 var stage = new Konva.Stage({ container: 'box', width, height: height }); // 第二步，创建一个layer图层 var layer = new Konva.Layer(); // 第三步，创建一个或者多个图形 // 这里是创建矩形 var rect = new Konva.Rect({ x: 100, y: 100, 100, height: 50, fill: 'green', stroke:'block', strokeWidth: 4 }) // 第四步，将图形添加到图层中，add() layer.add(rect) // 第五步，将图层添加到stage舞台中 stage.add(layer) </script> </body> </html>