<!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. centos下dnsmasq安装与配置

    说明1.dnsmasq是一款小巧且方便地用于配置DNS服务器和DHCP服务器的工具,适用于小型网络,它提供了DNS解析功能和可选择的DHCP功能. 2.dnsmasq可以解决小范围的dns查询问题,如 ...

  2. [FJOI2017]矩阵填数

    [Luogu3813] [LOJ2280] 写得很好的题解 \(1.\)离散化出每一块内部不互相影响的块 \(2.\)\(dp[i][j]\)为前 \(i\) 种重叠块其中有 \(j\) 这些状态的矩 ...

  3. 【2-SAT】【并查集】NOIp模拟题 植树方案 题解

        一个类似2-SAT的思想,但是简化了很多.只需要用到并查集实现. 题目描述 企鹅国打算种一批树.所谓树,就是由$N$个结点与$N-1$条边连接而成的连通无向图.企鹅国的国王对于这些树有下列要求 ...

  4. input type=checkbox的值后台怎么接受

    input type=checkbox的值是on或off 实体类中这样写即可 public void setChapterVisibility(Object chapterVisibility) { ...

  5. java.lang.IllegalArgumentException: Result Maps collection already contains value for xxx

    本人项目产生此问题的原因是: 本地备份了一份xxxmapper.xml的副本“xxxmapper - 副本.xml”,应该是系统会自动加载“mappe”目录下的所有xml文件. 参考:https:// ...

  6. oracle 笔记---(一)

    +查看主节点和副节点 oclumon manage -get MASTER REPLICA +查看当前的统计信息和保存的时间段 oclmon manage -get repsize +收集时间段内的节 ...

  7. oracle 备份恢复篇(四)---rman 单个数据文件

    一,环境背景

  8. C++ Memory System Part1: new和delete

    在深入探索自定义内存系统之前,我们需要了解一些基础的背景知识,这些知识点是我们接下来自定义内存系统的基础.所以第一部分,让我们来一起深入了解一下C++的new和delete家族,这其中有很多令人吃惊的 ...

  9. poi excel 常用api

    http://www.cnblogs.com/huajiezh/p/5467821.html

  10. 解决VMWARE 虚拟机安装64位系统“此主机支持 Intel VT-x，但 Intel VT-x 处于禁用状态

    VMWARE WORKSTATION 在安装64为操作系统报错,报错内容如图: 错误提示已经很清楚了,需要在BIOS 中打开intel VT-x g功能,开启此功能的前提是: 1.首先要确定的就是你的 ...