<!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. Linux下命令别名配置

    在~/.bashrc文件中添加相关命令别名内容,可以降低风险操作 1. vim ~/.bashrc alias rm='rm -i' alias cp='cp -i' alias mv='mv -i' ...

  2. 2016 ccpc 杭州 D.Difference hdu5936（折半枚举）

    有坑!!!当x==0时,因为y>0,a,b不能同时为0,所以答案要-1 #include<iostream> #include<cstdlib> #include< ...

  3. Apache Shiro(三)-登录认证和权限管理MD5加密

    md5 加密 在前面的例子里,用户密码是明文的,这样是有巨大风险的,一旦泄露,就不好了.所以,通常都会采用非对称加密,什么是非对称呢?就是不可逆的,而 md5 就是这样一个算法.如代码所示 123 用 ...

  4. Python入门笔记——（1）数字与表达式

    一.算术运算 整除:// 取余:% 乘方:** (a ** b = pow(a, b)) 十六进制表示:0x...,八进制表示0... round(x [, n]):对x从小数点第n位取四舍五入结果, ...

  5. h5 的video视频控件

    h5 的video视频控件 由于html5的流行,其中的video视频的使用很流行,使得可恨的IE9也能与时俱进了. video所支持的格式有mp4.ogg和wav三种. 例: HTML5 Video ...

  6. PIE SDK屏幕坐标和地图坐标转换

    1. 功能简介 屏幕坐标和地图坐标转换,就是字面意思,将电脑屏幕的坐标转换为带有空间信息的地图坐标,主要运用PIE SDK地图控件的ToMapPoint()方法,而地图坐标转换为设备坐标(屏幕),用的 ...

  7. ansible 入门学习（一）

    一,ansible 目录结构 (来自于ansible权威指南) 二,ansible.cfg 配置项说明 /etc/ansible/ansible.cfg --> ———————————————— ...

  8. Angular4+NodeJs+MySQL 入门-01

    有一定的后台开发经验ES6语法.后台没有用框架来,纯自己写.会sql语句 安装NodeJS的安装 从网上下载 https://nodejs.org/en/ 选择自己,我用的是最新版本 Angular ...

  9. (转)shell脚本之文件测试操作符及整数比较符

    shell脚本之文件测试操作符及整数比较符 原文:http://www.cnblogs.com/Steward-Xu/p/6722592.html 一.文件测试操作符: 在书写测试表达式是,可以使用一 ...

  10. How to add more to Git Bash on Windows

    How to add more to Git Bash on Windows Download the lastest wget binary for windows from https://ete ...