<!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. sublime text3文本字体大小设置

    1.perferences->settings-user 4·将以下代码粘贴进入即可 { "font_face": "source code pro, " ...

  2. json、xml

    json:(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式.简单地说,JSON 可以将 JavaScript 对象中表示的一组数据转换为字符串,然 ...

  3. Python web前端 02 CSS

    Python web前端 02 CSS 一.选择器 1.CSS的几种样式(CSS用来修饰.美化网页的) #建立模板 复制内容--->SETTING---> Editor -----> ...

  4. Python web前端 03 CSS属性

    Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...

  5. Asp.Net 远程连接Oracle数据库

    Asp.Net 远程连接Oracle数据库 首先从微软停止.Net FrameWork支持Oracle数据库的研发,转为第三方提供说起,微软是很有实力的公司,他在桌面领域令其他对手望其项背,产品战线也 ...

  6. POJ_2456 Aggressive cows 【二分求最大化最小值】

    题目: Farmer John has built a new long barn, with N (2 <= N <= 100,000) stalls. The stalls are l ...

  7. Autofac构建

    1.初始化 using System.Reflection; using System.Web; using System.Web.Mvc; using System.Configuration; u ...

  8. [转] Java @interface 自定义注解

    [From] http://blog.csdn.net/afterlife_qiye/article/details/53748973 1. 注解的好处 注解可以替代配置文件完成对某些功能的描述,减少 ...

  9. [转] log4j-over-slf4j与slf4j-log4j12共存stack overflow异常分析

    [From] http://www.tuicool.com/articles/INveIf 注:下文中的“桥接”.“转调”.“绑定”等词基本都是同一个概念. log4j-over-slf4j和slf4 ...

  10. 完美的js继承

    //完美的js继承 少了类管理器 Object.extend=function(){ var fnTest = /\b_super\b/; //继承父类 var _super = arguments[ ...