使用konva来绘制一个矩形 

 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             width: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             width: 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>

 

posted @ 2017-11-28 13:56  前端极客  阅读(1112)  评论(0)  编辑  收藏  举报