<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>坐标点进行连线</title>

    <style>

        canvas{

            border: 1px solid red;

        }

    </style>

</head>

<body>

    <!-- 将今天绘制的坐标点进行连线 -->

    <canvas width="600" height="400" id="canvas"></canvas>

</body>

<script>

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

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

    var padding = 30;

    var arrowHeight = 20,

        arrowWidth = 10;

    var x0 = padding,

        y0 = canvas.height - padding;

    var maxX = canvas.width - padding*2 -arrowHeight,

        maxY = canvas.height - padding*2 - arrowHeight;

    //绘制坐标轴

    //X轴

    ctx.moveTo(x0,y0);

    ctx.lineTo(x0,y0 - maxY-arrowHeight);

    //Y轴

    ctx.moveTo(x0,y0);

    ctx.lineTo(x0 + maxX +arrowHeight,y0);

    ctx.stroke();

    //绘制箭头

    //X轴

    ctx.beginPath();

    ctx.moveTo(x0+maxX+arrowHeight,y0);

    ctx.lineTo(x0+maxX,y0-arrowWidth*0.5);

    ctx.lineTo(x0+maxX+arrowHeight*0.5,y0);

    ctx.lineTo(x0+maxX,y0+arrowWidth*0.5);

    //Y轴

    ctx.moveTo(x0,y0-maxY-arrowHeight);

    ctx.lineTo(x0-arrowWidth*0.5,y0-maxY);

    ctx.lineTo(x0,y0-maxY-arrowHeight*0.5);

    ctx.lineTo(x0+arrowWidth*0.5,y0-maxY);

    ctx.fill();

    //绘制点

    ctx.beginPath();

    var data = [ [ 10, 20 ], [ 15, 13 ], [ 17, 30 ], [ 30, 10 ], [ 20, 15 ] ];

    //取点的数据

    /*将其中X与Y的最大值找出来，因为要做一个比例的转化：

                            点坐标/max点坐标 = 页面上点坐标/canvas的轴的最大值*/

    var pointX = Math.max.apply(null,data.map(function(v){return v[0];}));

    var pointY = Math.max.apply(null,data.map(function(v){return v[1];}));

    //法一：使用冒泡排序

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

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

            if(data[j][0]>data[j+1][0]){

                var temp = data[j +1];

                data[j+1] = data[j];

                data[j] = temp;

            }

        }

    }

    //声明一个新数组用于存储数据

    var arr = [];

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

        var tempX = data[i][0]/pointX*maxX,

            tempY = data[i][1]/pointY*maxY;

        //一定要记得坐标的最后一步转换

        var X = x0 + tempX,

            Y = y0 - tempY;

        arr.push([X,Y]);

        ctx.moveTo(X-4,Y-4);

        ctx.lineTo(X-4,Y+4);

        ctx.lineTo(X+4,Y+4);

        ctx.lineTo(X+4,Y-4);

    }

    console.log(arr);

    ctx.fill();

    //画线

    ctx.beginPath();

    //比较值，优化直线

    arr.forEach(function(v,i){

        ctx[['moveTo','lineTo'][i>0?1:0]](v[0],v[1]);

    })

    /*for(var i = 0 ; i < data.length-1 ; i++){

        var tempX = data[i][0]/pointX*maxX,

            tempY = data[i][1]/pointY*maxY;

        var tempX1 = data[i+1][0]/pointX*maxX,

            tempY1 = data[i+1][1]/pointY*maxY;

        //一定要记得坐标的最后一步转换

        var X = x0 + tempX,

            Y = y0 - tempY,

            X1 = x0 + tempX1,

            Y1 = y0 - tempY1;

        ctx.moveTo(X,Y);

        ctx.lineTo(X1,Y1);

    }*/

    ctx.stroke();

</script>

</html>

使用canvas来绘制折线图的更多相关文章

  1. canvas+js绘制折线图

    效果: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  2. canvas学习之折线图

    接着上一张柱状图讲,我们是使用折线图: import {canvasPoint} from '../../assets/js/canvas';import {basicInfo,histogramMo ...

  3. 用canvas绘制折线图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. Android自己定义组件系列【9】——Canvas绘制折线图

    有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了非常多插件,可是非常多时候我们须要依据详细项目自己定义这些图表,这一篇文章我们一起来看看怎样在Android中使用Can ...

  5. 【带着canvas去流浪】（2）绘制折线图

    目录 一. 任务说明 二. 重点提示 三. 示例代码 3.1 一般折线图 3.2 用贝塞尔曲线绘制平滑折线图 四. 大数据量场景 示例代码托管在:https://github.com/dashnowo ...

  6. Android自定义控件 -Canvas绘制折线图(实现动态报表效果)

    有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了很多插件,但是很多时候我们需要根据具体项目自定义这些图表,这一篇文章我们一起来看看如何在Android中使用Canvas ...

  7. Android自定义组件系列【9】——Canvas绘制折线图

    有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了很多插件,但是很多时候我们需要根据具体项目自定义这些图表,这一篇文章我们一起来看看如何在Android中使用Canvas ...

  8. 带着canvas去流浪系列之二 绘制折线图

    [摘要] 用canvasAPI实现echarts简易图表 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明 使用原生canvasAPI绘制 ...

  9. 【Canvas】(2)---绘制折线图

    绘制折线图 之前在工作的时候,用过百度的ECharts绘制折线图,上手很简单,这里通过canvas绘制一个简单的折线图.这里将一整个绘制过程分为几个步骤: 1.绘制网格 2.绘制坐标系 3.绘制点 4 ...

随机推荐

  1. JAVASCRIPT 使用 && 和 || 完成 简写

    123=='1234' && 'active'    为真时,返回 'active '...可以当成 三元运算符的简写形式哦. let  val = val || 'active'  ...

  2. 【算法笔记】B1009 说反话

    1009 说反话 (20 分) 给定一句英语,要求你编写程序,将句中所有单词的顺序颠倒输出. 输入格式: 测试输入包含一个测试用例,在一行内给出总长度不超过 80 的字符串.字符串由若干单词和若干空格 ...

  3. QDU_组队训练（AJFC）

    A - Pretty Matrix DreamGrid's birthday is coming. As his best friend, BaoBao is going to prepare a g ...

  4. python 并发之多进程实现

    一.multipricessing模块的介绍 python中的多线程无法利用多核优势,如果想要充分的使用多核CPU资源,在python中大部分情况下需要用多线程,python提供了multiproce ...

  5. HDU2588

    结论:如果p是n的约数,那么满足gcd(i,n)==p的i的个数是Φ(n/p) #include<bits/stdc++.h> using namespace std; const int ...

  6. poj3190

    一.题意:有n头牛,每头牛需要占用一个时间段的时间来挤奶,且必须有机器.问最少需要多少个机器 二.思路:区间贪心.把尽量多的牛放在一个棚子里,这样就可以使得用到的棚子数最少.只要任意两头牛的挤奶时间不 ...

  7. esper（4-3）-Non-Overlapping Context

    语法 create context context_name start start_condition end end_condition 如: // 9点到17点此context才可用(以引擎的时 ...

  8. 详解http之post

    详解http之post 首先,我们先看看jquery中的post方法的使用: $.ajax({ url:'api/bbg/goods/get_goods_list_wechat', data:{ , ...

  9. MYSQ系列-MYSQL基础增强(Mysql基本语句)

    MYSQL基础增强 库操作 创建一个使用UTF-8字符集的数据库: create database mydb character set UTF8; 创建一个带校对集的数据库 create datab ...

  10. mongo 多条件or

    or语句 or b=2 > db.XXX.find({"$or":[{"a":1}, {"b":2}]});  等于java mong ...