flex canvas绘图示例-创建一个由不同分块表示的等级条或指标条

效果：

代码：

PRotected function canGraphic_creationCompleteHandler(event:FlexEvent):void
   {
   
    VAR s:Canvas = canGraphic; //canGraphic是要引用 的画布
    s.graphics.beginFill(0xFFFFFF); //上边白线   240，3
    s.graphics.lineStyle(0, 0xFFFFFF);
    s.graphics.drawRect(0, 0, 240, 3);    
    s.graphics.enDFill();
    s.graphics.beginFill(0x00FF00); //矩形框1 40，20
    s.graphics.lineStyle(0, 0x00FF00);
    s.graphics.drawRect(0, 3, 40, 20);    
    s.graphics.endFill();
    s.graphics.beginFill(0xffd700);
    s.graphics.lineStyle(0, 0xffd700);
    s.graphics.drawRect(40, 3, 40, 20);    
    s.graphics.endFill();
    s.graphics.endFill();
    s.graphics.beginFill(0xff8c00); //矩形框3 40，20
    s.graphics.lineStyle(0, 0xff8c00);
    s.graphics.drawRect(80, 3, 40, 20);    
    s.graphics.endFill();
    s.graphics.beginFill(0xff0000);
    s.graphics.lineStyle(0, 0xff0000);
    s.graphics.drawRect(120, 3, 40, 20);    
    s.graphics.endFill();
    s.graphics.endFill();
    s.graphics.beginFill(0x990066); //矩形框5 40，20
    s.graphics.lineStyle(0, 0x990066);
    s.graphics.drawRect(160, 3, 40, 20);    
    s.graphics.endFill();
    s.graphics.beginFill(0x800000);
    s.graphics.lineStyle(0, 0x800000);
    s.graphics.drawRect(200, 3, 40, 20);    
    s.graphics.endFill();
    s.graphics.endFill();
    s.graphics.beginFill(0xFFFFFF); //白线2 240，3
    s.graphics.lineStyle(0, 0xFFFFFF);
    s.graphics.drawRect(0, 23, 240, 3);    
    s.graphics.endFill();  
   
    var arr:Array = new Array("I", "II", "III", "IV", "V", "VI");
    for (var i:int=0; i6; i++)
    {
     var lbl:Label = new Label();
     lbl.text = arr[i];    
     lbl.x = i * 40; lbl.y =3; lbl.width = 40; lbl.height = 20;
     lbl.setStyle("textAlign","center");
     lbl.setStyle('color','black');
     lbl.setStyle("verticalAlign","middle");
     s.addChild(lbl);
    }
   }

效果：

代码：

protected function canGraphic_creationcompleteHandler(event:FlexEvent):void
   {
   
    var s:Canvas = canGraphic; //canGraphic是要引用 的画布
    s.graphics.beginFill(0xFFFFFF); //上边白线   240，3
    s.graphics.lineStyle(0, 0xFFFFFF);
    s.graphics.drawRect(0, 0, 240, 3);    
    s.graphics.endFill();
    s.graphics.beginFill(0x00FF00); //矩形框1 40，20
    s.graphics.lineStyle(0, 0x00FF00);
    s.graphics.drawRect(0, 3, 40, 20);    
    s.graphics.endFill();
    s.graphics.beginFill(0xffd700);
    s.graphics.lineStyle(0, 0xffd700);
    s.graphics.drawRect(40, 3, 40, 20);    
    s.graphics.endFill();
    s.graphics.endFill();
    s.graphics.beginFill(0xff8c00); //矩形框3 40，20
    s.graphics.lineStyle(0, 0xff8c00);
    s.graphics.drawRect(80, 3, 40, 20);    
    s.graphics.endFill();
    s.graphics.beginFill(0xff0000);
    s.graphics.lineStyle(0, 0xff0000);
    s.graphics.drawRect(120, 3, 40, 20);    
    s.graphics.endFill();
    s.graphics.endFill();
    s.graphics.beginFill(0x990066); //矩形框5 40，20
    s.graphics.lineStyle(0, 0x990066);
    s.graphics.drawRect(160, 3, 40, 20);    
    s.graphics.endFill();
    s.graphics.beginFill(0x800000);
    s.graphics.lineStyle(0, 0x800000);
    s.graphics.drawRect(200, 3, 40, 20);    
    s.graphics.endFill();
    s.graphics.endFill();
    s.graphics.beginFill(0xFFFFFF); //白线2 240，3
    s.graphics.lineStyle(0, 0xFFFFFF);
    s.graphics.drawRect(0, 23, 240, 3);    
    s.graphics.endFill();  
   
    var arr:Array = new Array("I", "II", "III", "IV", "V", "VI");
    for (var i:int=0; i6; i++)
    {
     var lbl:Label = new Label();
     lbl.text = arr[i];    
     lbl.x = i * 40; lbl.y =3; lbl.width = 40; lbl.height = 20;
     lbl.setStyle("textAlign","center");
     lbl.setStyle('color','black');
     lbl.setStyle("verticalAlign","middle");
     s.addChild(lbl);
    }
   }

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！