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