1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 body { 8 padding: 0; 9 margin: 0; 10 background-color: #f0f0f0; 11 overflow: hidden; 12 } 13 </style> 14 <script src="konva.js"></script> 15 </head> 16 <body> 17 <div id="container"> 18 19 </div> 20 <script> 21 //第一步： 创建舞台 22 var stage=new Konva.Stage({ 23 container:'container', 24 window.innerWidth, 25 height:window.innerHeight 26 }); 27 //第二步： 创建一个层 28 var layer=new Konva.Layer(); 29 //第三步： 把层添加到舞台上去。 30 stage.add(layer); 31 // 第四步： 创建一个矩形 32 var rect=new Konva.Rect({ 33 x:100, 34 y:100, 35 opacity:.4, 36 rotation:40, 37 100, 38 height: 200, 39 scaleX: 1.2, 40 scaleY: 1.2, 41 draggable:true, 42 fill:'orange' 43 }); 44 // 第五步：把矩形添加到层上去 45 layer.add(rect); 46 //第六步：把层渲染到 舞台上。 47 layer.draw(); 48 </script> 49 </body> 50 </html>