利用canvas繪制折線圖的一種方法

利用canvas繪制折線圖

效果:

思路:

1)給出來的數值和橫坐標數據整體是沒有規律的,分別將它們保存在數組nums和datas中。並

2)隻有兩個坐標線,定義一個函數drawBorder繪制這兩條線;

3)考慮到折線是四段,這裡定義一個函數drawLine繪制折線,用一個for循環循環4次,每次循環從(numsX,numsY)繪制到(numsNX,numsNY)

4)再定義一個函數drawBlock來繪制橫坐標數值,折線上的菱形和數值,以及橫坐標。

註意:

1)考慮到橫坐標數值跟畫佈的實際像素值不能對應,因此要將實際數值等比例轉化為像素值再應用;

2)在繪制橫坐標時,橫坐標點數比縱坐標少一個,需要進行一次判斷;

3)這裡繪制菱形和其他繪制放在同一個函數裡,所以不能用平移坐標和旋轉矩形的方法。

代碼如下:

<canvas id="can1" width="800" height="600"></canvas>  
    <script type="text/javascript">  
            var can1 = document.getElementById("can1");  
            var ctx = can1.getContext("2d");  
            nums = [268,1236,1273,1545,1988];  
            datas = ["11.1-11.2","11.3-11.9","11.10-11.16","11.17-11.23","11.24-11.30"];  
            //畫出坐標線  
            function drawBorder(){  
                ctx.beginPath();  
                ctx.moveTo(100,50);  
                ctx.lineTo(100,550);  
                ctx.moveTo(100,550);  
                ctx.lineTo(600,550);  
                ctx.closePath();  
                ctx.stroke();  
            }  
            //畫出折線  
            function drawLine(){  
                for (i = 0;i < nums.length-1;i ++){  
                    //起始坐標  
                    var numsY = 550-nums[i]/500*100;  
                    var numsX = i*100+150;  
                    //終止坐標  
                    var numsNY = 550-nums[i+1]/500*100;  
                    var numsNX = (i+1)*100+150;  
                    ctx.beginPath();  
                    ctx.moveTo(numsX,numsY);  
                    ctx.lineTo(numsNX,numsNY);  
                    ctx.lineWidth = 6;  
                    ctx.strokeStyle = "#80aa33";  
                    ctx.closePath();  
                    ctx.stroke();  
                }  
            }  
            //繪制折線點的菱形和數值,橫坐標值,縱坐標值  
            function drawBlock(){  
                for (i = 0;i <= nums.length;i ++){  
                    var numsY = 550-nums[i]/500*100;  
                    var numsX = i*100+150;  
                    ctx.beginPath();  
                    // 畫出折線上的方塊  
                    ctx.moveTo(numsX-4,numsY);  
                    ctx.lineTo(numsX,numsY-4);  
                    ctx.lineTo(numsX+4,numsY);  
                    ctx.lineTo(numsX,numsY+4);  
                    ctx.fill();  
                    ctx.font = "15px scans-serif";  
                    ctx.fillStyle = "black";  
                    //折線上的點值  
                    var text = ctx.measureText(nums[i]);  
                    ctx.fillText(nums[i],numsX-text.width,numsY-10);  
                    //繪制縱坐標  
                    var colText = ctx.measureText((nums.length-i)*500);  
                    ctx.fillText((nums.length-i)*500,90-colText.width,i*100+55);  
                    //繪制橫坐標並判斷  
                    if (i < 5){  
                        var rowText = ctx.measureText(datas[i]);  
                        ctx.fillText(datas[i],numsX-rowText.width/2,570);  
                    }else if(i == 5) {  
                        return;  
                    }  
                    ctx.closePath();  
                    ctx.stroke();  
                }  
            }  
            drawBorder();  
            drawLine();  
            drawBlock();  
    </script>

發佈留言