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,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,20);???? ????s.graphics.endFill(); ????s.graphics.endFill(); ????s.graphics.beginFill(0xff8c00);//矩形框3?40，20 ????s.graphics.lineStyle(0,0xff8c00); ????s.graphics.drawRect(80,20);???? ????s.graphics.endFill(); ????s.graphics.beginFill(0xff0000); ????s.graphics.lineStyle(0,0xff0000); ????s.graphics.drawRect(120,20);???? ????s.graphics.endFill(); ????s.graphics.endFill(); ????s.graphics.beginFill(0x990066);//矩形框5?40，20 ????s.graphics.lineStyle(0,0x990066); ????s.graphics.drawRect(160,20);???? ????s.graphics.endFill(); ????s.graphics.beginFill(0x800000); ????s.graphics.lineStyle(0,0x800000); ????s.graphics.drawRect(200,20);???? ????s.graphics.endFill(); ????s.graphics.endFill(); ????s.graphics.beginFill(0xFFFFFF);//白线2?240，3 ????s.graphics.lineStyle(0,23,3);???? ????s.graphics.endFill();?? ???? ????var arr:Array = new Array("I","II","III","IV","V","VI"); ????for (var i:int=0;i<6;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); ????} ???}