2011年11月15日 星期二

[JavaScript] Use jsDraw2D library to draw.


Use jsDraw2D library to draw.



<script type="text/JavaScript">



//Create jsGraphics object

var gr = new jsGraphics(document.getElementById("canvas"));



//Create jsColor object

var col = new jsColor("blue");

var col2 = new jsColor("green");

var col3 =  new jsColor("#DCDCDC");

//Create jsPen object

var Line1 = new jsPen(col,25);

var Line2 = new jsPen(col2,25);



//Draw a background color

var d = new jsPoint(10,220);

gr.fillRectangle(col3,d,750,200);



//Draw a Download Comment Mark between 2 points

var Blue_Comment = new jsPen(col,20);

var Download_Comment_Start_Point = new jsPoint(20,230);

var Download_Comment_End_Point = new jsPoint(40,230);

gr.drawLine(Blue_Comment,Download_Comment_Start_Point,Download_Comment_End_Point);

gr.drawText("&nbsp;&nbsp;&nbsp;&nbsp;Download",Download_Comment_End_Point);



//Draw a Upload Comment Mark between 2 points

var Green_Comment = new jsPen(col2,20);

var Upload_Comment_Start_Point = new jsPoint(150,230);

var Upload_Comment_End_Point = new jsPoint(170,230);

gr.drawLine(Green_Comment,Upload_Comment_Start_Point,Upload_Comment_End_Point);

gr.drawText("&nbsp;&nbsp;&nbsp;&nbsp;Upload",Upload_Comment_End_Point);



//Draw a Download Speed Rate between 2 points

var Download_Start_Point = new jsPoint(10,300);

var Download_End_Point = new jsPoint(600,300);

gr.drawLine(Line1,Download_Start_Point,Download_End_Point);

gr.drawText("&nbsp;&nbsp;&nbsp;&nbsp;3M bps",Download_End_Point);



//Draw a Upload Speed Rate between 2 points

var Upload_Start_Point = new jsPoint(10,350);

var Upload_End_Point = new jsPoint(200,350);

gr.drawLine(Line2,Upload_Start_Point,Upload_End_Point);

gr.drawText("&nbsp;&nbsp;&nbsp;&nbsp;43K bps",Upload_End_Point);





</script>

0 意見:

張貼留言