前端---HTML5如何製作一個折線圖
在學習如何製作折線圖,我們先學習一下canvas元素中CanvasRenderingContext2D物件提供的相關方法,通過使用座標表換,開發者無須繁瑣計算每個點的座標,只需對座標系整體表換即可.
CanvasRenderingContext2D提供瞭如下的方法進行座標變換:
translate(double dx,double dy):平移座標系統.該方法相當於把原來位於(0,0)位置的座標遠點平移到(dx,dy)點.在平移後的座標系統上繪製圖形時,所有座標點的X座標都相當於增加了dx,所有點的Y座標都相當於增加了dy.
scale(double sx,double sy):縮放座標系統.該方法控制座標系統水平方向上縮放sx,垂直方向上縮放sy.在縮放後的座標系統上繪製圖形時,所有有座標點的X座標都相當與乘以了sx因子,所有點的Y座標都相當於乘以了sy因子.
rotate(double angle):旋轉座標系統.該方法控制系統旋轉angle弧度.在旋轉後的座標系統上繪製圖形時,所有座標點的X,Y座標都相當於旋轉了angle弧度之後的座標.
transform(double m11,double m12,double m22,double dx,double dy):對當前座標系統執行矩陣變換.
並且還提供瞭如下兩個方法來儲存,恢復繪圖狀態:
save():儲存當前的繪圖狀態.
restore():恢復之前儲存的繪圖狀態.
折線圖的程式碼及示意圖如下:
<!DOCTYPE html> <html> <head> <title>折線圖</title> </head> <body> <h2>折線圖</h2> <canvas id="mc" width="500" height="400" style="border:1px solid black"></canvas> <script type="text/javascript"> var canvas=document.getElementById('mc'); var ctx=canvas.getContext('2d'); ctx.beginPath(); //座標軸 ctx.moveTo(30,20); ctx.lineWidth="1"; ctx.lineTo(30,380); ctx.lineTo(400,380); //ctx.closePath(); //橫線 ctx.strokeStyle="#999"; for(var i=0;i<7;i++) { ctx.moveTo(30,30+50*i); ctx.lineTo(400,30+50*i); } //折線 ctx.moveTo(100,300); ctx.lineTo(200,200); ctx.lineTo(280,280); ctx.lineTo(380,30); ctx.stroke(); </script> </body> </html>
我們直接看程式碼裡面body部分,首先我們建立一個canvas畫布,定義了它的長,寬.然後在<script...>******<script.../>中插入js程式碼,先採用var來定義一個例項,用document.getElementById();方法來與之前定義的canvas畫布進行繫結在一起.
首先編寫"ctx.beginPath();"來開始一段繪製的開始;
ctx.moveTo(30,20); //使用moveto方法將座標原點移動到(30,20);
ctx.lineWidth="1"; //使用linewidth方法將線的寬度設為1px;
ctx.lineTo(30,380); //使用lineto將(30,20)和(30,80)的線連線在一起
ctx.lineTo(400,380); //再將(30,20)和(400,380)的線連線在一起
剩餘的其他方法如上面解釋一樣.