使用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         stage.add(layer);
30         //中心点坐标
31         var cenX=stage.width()/2;//注意Konva获取数据都是用方法获取值
32         var cenY=stage.height()/2;
33         var x=1/8*stage.width();//矩形的坐标
34         var y=cenY;
35         var height = 1 / 12 * stage.height();
36         var maxWidth =  3/4 * stage.width();
37         //绘制一个进度条
38         var innerRect=new Konva.Rect({
39             x: x,
40             y: y,
41             width: 100,
42             height: height,
43             opacity: .7,
44             fill: 'lightblue',
45             cornerRadius: height / 2  // corner:角落
46         })
47         //把内部的矩形放到层里面去
48         layer.add( innerRect );
49         //创建外边框矩形
50         var outerRect=new Konva.Rect({
51             x: x,    //矩形的x的坐标
52             y: y,    //矩形的y坐标
53             width: maxWidth, // 矩形的宽度
54             height: height,    // 矩形的高度
55             stroke: 'blue', // 如果设置了stroke，那么就进行描边
56             strokeWidth: 4, //描边的宽度
57             // fill: 'green', // 如果设置了fill的样式，那么进行填充
58             cornerRadius: height / 2 // 设置圆角的半径
59         });
60         layer.add(outerRect);
61         layer.draw();
62     </script>
63 </body>
64 </html>

 

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