效果：

源码：

<!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. java高级工程师（三）

    一.独白 之前也面试别人,现在轮到自己找工作,怎么说呢,每个面试官的看法不一样,面试的方式就不一样,比如我面试别人我喜欢问项目中他用到了那些,然后针对用到的技术去问一些问题,或者说对于某些场景的一些技 ...

  2. re 正则模块

    re模块(* * * * *) 就其本质而言,正则表达式(或 RE)是一种小型的.高度专业化的编程语言,(在Python中)它内嵌在Python中,并通过 re 模块实现.正则表达式模式被编译成一系列 ...

  3. CentOS 7如何开放其它的端口，比如8080

    CentOS 7如何开放其它的端口,比如8080 CentOS 7.0默认使用的是firewall作为防火墙,这里改为iptables防火墙. 1.关闭firewall: systemctl stop ...

  4. Workflow笔记2——状态机工作流（转）

    出处:http://www.cnblogs.com/jiekzou/p/6192813.html 在上一节Workflow笔记1——工作流介绍中,介绍的是流程图工作流,后来微软又推出了状态机工作流,它 ...

  5. Interceptor for {http://cxf.liuyang.com/}IHiServiceService has thrown exception, unwinding now org.apache.cxf.binding.soap.SoapFault: Error reading XMLStreamReader.

    Jquery同域访问:客户端连接服务器访问跨域访问:通过本地html文档,浏览器点击开访问(jquery不支持此访问) 用域名的方式访问http://localhost:8080/CXF_09_jqu ...

  6. Opengl的TOOL收集

    1. http://my.oschina.net/sweetdark 不错的opengl学习网站 2, 优秀博客 网址: http://www.zwqxin.com/archives/opengl/s ...

  7. EBS SOA 修改Web Service参数

    l 需求描述 当把PL/SQL声明Load到ISG,生成WSDL并部署完毕后,需要修改PL/SQL的包头声明部分.例如修改某个过程的参数类型,再重新Load,重新生成WSDL,重新部署.我们会发现PL ...

  8. lambda distinct

    public ActionResult Index() { IList<RegisterModel> regList = new List<RegisterModel>() { ...

  9. 如何在Mirth Connect中创建和调用自定义Java代码

    0-前言 本文章将向您展示如何创建自定义Java类,将其编译/打包到JAR中,将其包含在Mirth Connect在,并在JavaScript中调用它,您可以从任何JavaScript上下文调用自定义 ...

  10. 由于没有公钥，无法验证下列签名 Ubuntu

    问题:执行 apt-get update 时错误 W: GPG 错误:https://apt.dockerproject.org ubuntu-trusty InRelease: 由于没有公钥,无法验 ...