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	可选。允许的最大文本宽度，以像素计。

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

 </head>

 <body>

 <div id="container">

     <canvas id="can">

         你的浏览器不支持canvas，请升级浏览器

     </canvas>

 </div>

 <script>

    var canvas=document.getElementById('can');

     var ctx=canvas.getContext('2d');

    canvas.width=800;

    canvas.height=600;

 //   给定的点

    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(){

         var arrowWidth=10;

         ctx.beginPath();

         ctx.moveTo(100,550);

         ctx.lineTo(700,550);

         ctx.lineTo(700-arrowWidth,550-arrowWidth);

         ctx.lineTo(700,550);

         ctx.lineTo(700-arrowWidth,550+arrowWidth);

         ctx.stroke();

         ctx.beginPath();

         var arrowWidth=10;

         ctx.moveTo(100,550);

         ctx.lineTo(100,10);

         ctx.lineTo(100-arrowWidth,50+arrowWidth);

         ctx.lineTo(100,10);

         ctx.lineTo(100+arrowWidth,50+arrowWidth);

         ctx.stroke();

     }

    //画出折线

    function drawLine(){

        //因为5个点，只要画出4条折线，因此只需要nums.length-1;

        for(var i=0;i<nums.length-1;i++){

            //起始坐标

            var numsX=i*100+150;//x坐标是从100起始的；x轴长500；将600坐标同等分为5份；；

            var numsY=550-nums[i]/5;//y坐标是从50起始的；y轴长500；从550开始同比例缩放5倍；

            //终止坐标

            var numsNx=(i+1)*100+150;

            var numsNy=550-nums[i+1]/5;

            ctx.beginPath();

            ctx.moveTo(numsX,numsY);

            ctx.lineTo(numsNx,numsNy);

            ctx.lineWidth=6;

            ctx.strokeStyle='skyblue';

            ctx.closePath();

            ctx.stroke();

        }

    }

    //绘制折线点的菱形和数值，横坐标值，纵坐标值

    function drawBlock(){

        for(var i=0;i<nums.length;i++){

            var numsY = 550-nums[i]/5;

            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>

 </body>

 </html>

效果图如下：

cancas绘制折线图的更多相关文章

用canvas绘制折线图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
php中用GD绘制折线图
php中用GD绘制折线图,代码如下: Class Chart{ private $image; // 定义图像 private $title; // 定义标题 private $ydata; // 定 ...
UUChart的使用--iOS绘制折线图
UUChart是一个用于绘制图表的第三方,尤其适合去绘制折线图. 二.下载地址: https://github.com/ZhipingYang/UUChartView 三.使用第一步.首先我们将下载 ...
html5绘制折线图
html5绘制折线图详细代码 <html> <canvas id="a_canvas" width="1000" height="7 ...
Android自己定义组件系列【9】——Canvas绘制折线图
有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了非常多插件,可是非常多时候我们须要依据详细项目自己定义这些图表,这一篇文章我们一起来看看怎样在Android中使用Can ...
JFreeChart绘制折线图实例
JFreeChart是JAVA平台上的一个开放的第三方图表绘制类库.只要下载JFreeChart的类库,导入项目即可使用.下面是一个绘制折线图的实例.各处注释都已经写的比较清晰了. package c ...
【带着canvas去流浪】（2）绘制折线图
目录一. 任务说明二. 重点提示三. 示例代码 3.1 一般折线图 3.2 用贝塞尔曲线绘制平滑折线图四. 大数据量场景示例代码托管在:https://github.com/dashnowo ...
python使用matplotlib绘制折线图教程
Matplotlib是一个Python工具箱,用于科学计算的数据可视化.借助它,Python可以绘制如Matlab和Octave多种多样的数据图形.下面这篇文章主要介绍了python使用matplot ...
用PNChart绘制折线图
写在前面上一篇文章已经介绍过用PNChart绘制饼状图了,绘制折线图的步骤和饼状图的步骤是相似的,按照中的准备做好准备工作后就可以绘制折线图了. 开始使用 1.在view中声明一个PNLineCha ...

随机推荐

MySQL中int(5) 中的5代表什么意思？
对于INT型,MySQL支持指定显示宽度例如:int(5):表示如果数值宽度小于5位,则填满宽度,保证总宽度为5位.默认为int(11),配合zerofill可以看到效果. DROP TABLE IF ...
oracle 快速备份表数据
oracle 快速备份表数据 CreateTime--2018年2月28日17:04:50 Author:Marydon UpdateTime--2017年1月20日11:45:07 1.1.9. ...
DIY手机万能红外遥控器
DIY手机万能红外遥控器 1.手机安装软件:遥控精灵 2.红外二极管两个(旧的遥控器里面可以拆) 3.耳机的插头一个步骤:首选讲两个二极管的正负相接(即a二极管的正极连接b二极管的负极,a二极管的负 ...
彻底抛弃脚本录制，LR脚本之使用web_custom_request函数自定义http请求
初学性能测试时候,第一步必学脚本录制,但一路下来各种录制失败.回放脚本失败的问题层出不穷,究其原因一是LR本身存在对测试环境的兼容性问题导致录制失败,更深层次的原因是录制者不清楚LR录制脚本的原理,或 ...
Yum源的优先级
yum源自定义优先级,提高下载速速! 01.Install Yum Priorities Run the Yum Priorities install commandyum install yum-p ...
maven 继承关系和聚合
maven继承管理让版本的管理只在一个地方改变 modules用于聚合,把执行的项目都放到同一的地方用module包括,可以省去一个个项目去mvn install,这样可以所有项目一次聚合 mvn ...
Python websocket
一.自己实现websocket 网上流传的都是Python2的websocket实现 # coding=utf8 # !/usr/bin/python import struct, socket im ...
Mac下搭建svn服务器和XCode配置svn
先打开命令行终端. 1.创建svn repository svnadmin create /yourpath/svnroot/repository 2.配置svn用户权限. / yourpath /s ...
Block编程注意的问题
一,前言 block 是在 iOS 4 中引入的新特性,它和 C++ 11 中的 lamba 表达式概念相似,有时候也被称为闭包.经过一段时间的使用,我发现要用对用好 block 还是有不少需要注 ...
1.Java基础-面向对象编程思想（封装继承多态接口）
封装: 1.定义:隐藏对象的属性和实现细节,仅对外公开接口,控制在程序中属性的读和修改的访问级别. 2.封装的目的是:增强安全性和简化编程,使用者不必了解具体的实现细节,而只是要通过外部接口,一特定的 ...

cancas绘制折线图

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

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

参数值

cancas绘制折线图的更多相关文章

随机推荐

热门专题