效果：

源码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>坐标系绘制</title>

</head>

<body>

<canvas id="canvas"></canvas>

<script>

    (function () {

        //canvas布局

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

      canvas.width  = 600;

      canvas.height = 600;

      canvas.style.border = "1px solid red";

      //获取上下文

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

      //绘制坐标轴

        var x0 = 100,y0 = 500;// xy轴原点

        var maxX = 500,maxY = 100;

        var lineWidth = 10;//箭头宽度

        //x轴

        ctx.beginPath();

        ctx.moveTo(x0,y0);

        ctx.lineTo(maxX,y0);

        ctx.lineTo(maxX-lineWidth,y0+lineWidth);

        ctx.moveTo(maxX,y0);

        ctx.lineTo(maxX-lineWidth,y0-lineWidth);

        ctx.stroke();

        //y轴

        ctx.beginPath();

        ctx.moveTo(x0,y0);

        ctx.lineTo(x0,maxY);

        ctx.lineTo(x0-lineWidth,maxY+lineWidth);

        ctx.lineTo(x0,maxY);

        ctx.lineTo(x0+lineWidth,maxY+lineWidth);

        ctx.stroke();

        //折线

        var data = [.5,.4,.6,.8,.7,.9,.3];

        var xWidht = 400/(data.length+1);//x轴间距

        ctx.beginPath();

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

            ctx.lineTo(100+xWidht*(i+1),500-400*data[i]);

        }

        ctx.strokeStyle = 'blue';

        ctx.stroke();

    }())

</script>

</body>

</html>

canvas+js绘制折线图的更多相关文章

  1. 使用canvas来绘制折线图

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

  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. C语言时间处理

    一.简介 时间处理在编程中经常遇到,包括程序的运行时间和显示时间等.在标准C中, 日期和时间的处理包含在 time.h 的头文件中,需要使用日期和时间相关的类型的函数的话, 需要导入time.h. 二 ...

  2. WHY JAVASCRIPT NEEDS TYPES

    Types have a bad reputation for making code harder to read, adding unnecessary ceremony, and in gene ...

  3. 8 求s=a+aa+aaa+aaaa+aa...a的值

    题目:求s=a+aa+aaa+aaaa+aa...a的值,其中a是一个数字. * 例如2+22+222+2222+22222(此时共有5个数相加),几个数相加有键盘控制.程序分析:关键是计算出每一项的 ...

  4. python之使用API（WEB应用编程接口）

    1.处理API响应 import requests #执行API调用并存储响应 url = "https://api.github.com/search/repositories?q=lan ...

  5. xib下这种方式创建cell

      这种方法在iOS5.0之前是不能够创建成功的.   MEConvertListTableViewCell *cell = [tableView dequeueReusableCellWithIde ...

  6. Hdu4280 Island Transport 2017-02-15 17:10 44人阅读 评论(0) 收藏

    Island Transport Problem Description In the vast waters far far away, there are many islands. People ...

  7. Zabbix部署与使用

    *******需要配置网易YUM源来安装相关依赖包: [local_yum] name=local_yum baseurl=http://mirrors.163.com/centos/6/os/x86 ...

  8. GPU的历史：从固定管线到可编程管线再到通用计算平台

    开始的时候GPU不能编程,也叫固定管线的,就是把数据按照固定的通路走完. 和CPU同样作为计算处理器,顺理成章就出来了可编程的GPU,但是那时候想在GPU上编程可不是容易的事,你只能使用GPU汇编来写 ...

  9. access建立sql查询语句运行查询语句

    1.打开一个Access数据库文件 2.点击“创建”标签中的“查询设计”,会弹出一个“显示表”的对话框,点击“关闭”将其关闭 3.这时会有一个名为“查询*”的窗口,还不能输入SQL语句 4.点击左上角 ...

  10. 使用Docker部署ASP.NET Core应用程序实践

    前言 最近把很火的Docker给看了,于是就磨拳擦掌要去实践一下.于是就拿之前一个aps.net core的项目(已被停止)去练手.该项目之前在ubuntu14.04上确保可以正常运行,所以docke ...