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(" 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(" 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(" 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(" 43K bps",Upload_End_Point);
</script>
0 意見:
張貼留言