cancas绘制折线图

知识点回顾：

知识点1：

measureText() 方法返回包含一个对象，该对象包含以像素计的指定字体宽度。

提示：如果您需要在文本向画布输出之前，就了解文本的宽度，那么请使用该方法。

JavaScript 语法：context.measureText(text).width;

text是要测量的文本；

知识点2：

 

illText() 方法在画布上绘制填色的文本。文本的默认颜色是黑色。

 

提示：使用 font 属性来定义字体和字号，并使用 fillStyle 属性以另一种颜色/渐变来渲染文本。

 

JavaScript 语法：context.fillText(text,x,y,maxWidth);

 

参数值

 

参数描述
text 规定在画布上输出的文本。
x 开始绘制文本的 x 坐标位置（相对于画布）。
y 开始绘制文本的 y 坐标位置（相对于画布）。
maxWidth 可选。允许的最大文本宽度，以像素计。

 

 

 

 

 

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8 <div id="container">
 9     <canvas id="can">
10         你的浏览器不支持canvas，请升级浏览器
11     </canvas>
12 </div>
13 <script>
14    var canvas=document.getElementById('can');
15     var ctx=canvas.getContext('2d');
16    canvas.width=800;
17    canvas.height=600;
18 //   给定的点
19    nums = [268,1236,1273,1545,1988];
20    datas = ["11.1-11.2","11.3-11.9","11.10-11.16","11.17-11.23","11.24-11.30"];
21    //画出坐标线
22     function drawBorder(){
23         var arrowWidth=10;
24         ctx.beginPath();
25         ctx.moveTo(100,550);
26         ctx.lineTo(700,550);
27         ctx.lineTo(700-arrowWidth,550-arrowWidth);
28         ctx.lineTo(700,550);
29         ctx.lineTo(700-arrowWidth,550+arrowWidth);
30         ctx.stroke();
31         ctx.beginPath();
32         var arrowWidth=10;
33         ctx.moveTo(100,550);
34         ctx.lineTo(100,10);
35         ctx.lineTo(100-arrowWidth,50+arrowWidth);
36         ctx.lineTo(100,10);
37         ctx.lineTo(100+arrowWidth,50+arrowWidth);
38         ctx.stroke();
39     }
40    //画出折线
41    function drawLine(){
42        //因为5个点，只要画出4条折线，因此只需要nums.length-1;
43        for(var i=0;i<nums.length-1;i++){
44            //起始坐标
45            var numsX=i*100+150;//x坐标是从100起始的；x轴长500；将600坐标同等分为5份；；
46            var numsY=550-nums[i]/5;//y坐标是从50起始的；y轴长500；从550开始同比例缩放5倍；
47            //终止坐标
48            var numsNx=(i+1)*100+150;
49            var numsNy=550-nums[i+1]/5;
50            ctx.beginPath();
51            ctx.moveTo(numsX,numsY);
52            ctx.lineTo(numsNx,numsNy);
53            ctx.lineWidth=6;
54            ctx.strokeStyle='skyblue';
55            ctx.closePath();
56            ctx.stroke();
57        }
58    }
59    //绘制折线点的菱形和数值，横坐标值，纵坐标值
60    function drawBlock(){
61        for(var i=0;i<nums.length;i++){
62            var numsY = 550-nums[i]/5;
63            var numsX = i*100+150;
64            ctx.beginPath();
65            // 画出折线上的方块
66            ctx.moveTo(numsX-4,numsY);
67            ctx.lineTo(numsX,numsY-4);
68            ctx.lineTo(numsX+4,numsY);
69            ctx.lineTo(numsX,numsY+4);
70            ctx.fill();
71            ctx.font= "15px scans-serif";
72            ctx.fillStyle='black';
73            // 画出折线上的方块完毕
74            //折线上的点值
75            var text=ctx.measureText(nums[i]);
76            ctx.fillText(nums[i],numsX-text.width,numsY-10);
77            //绘制纵坐标
78            var colText=ctx.measureText((nums.length-i)*500);
79            ctx.fillText((nums.length-i)*500,90-colText.width,i*100+55);
80            //绘制横坐标并判断
81            if(i<5){
82                var rowText=ctx.measureText(datas[i]);
83                ctx.fillText(datas[i],numsX-rowText.width/2,570);
84            }else if(i==5){
85                return;
86            }
87            ctx.closePath();
88            ctx.stroke();
89 
90        }
91    }
92     drawBorder();
93    drawLine();
94    drawBlock();
95 </script>
96 
97 </body>
98 </html>

效果图如下：

posted @ 2017-11-28 08:53  前端极客  阅读(2076)  评论(0)  编辑  收藏  举报