效果：

源码：

<!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代码实现网络远程开机

    http://my.oschina.net/kingfire/blog/156764 概述 远程开机(Wake onLAN)是指通过网络实现对服务器或者pc启动运行,现在很多网卡都支持的这个功能. 其 ...

  2. oracle存储过程和游标参考

    oracle open cursor forhttp://www.itpub.net/thread-1874683-1-1.html

  3. Oracle GoldenGate 一、介绍和安装

    1 说明 1.1 下载和文档说明 下载地址:http://www.oracle.com/technetwork/middleware/goldengate/downloads/index.html 我 ...

  4. Android Studio真机测试

    本页内容 1.真机测试好处多 2.开始吧!真机测试 1.真机测试好处多 不久前才开我的Android Studio之旅,就遇上了一个大麻烦——创建的模拟器各种运行出错.尝试了各种解决方法,都没有什么结 ...

  5. laydate的使用

    理论可以看看:http://blog.csdn.net/u013372487/article/details/50534034 下载包:链接:http://pan.baidu.com/s/1kUNQ6 ...

  6. join sql图

    SELECT * FROM TableA INNER JOIN TableB ON TableA.name = TableB.name   id  name       id   name --  - ...

  7. Hadoop中Comparator原理

    在前面的博文<Hadoop中WritableComparable 和 comparator>中,对于WritableComparator说的不够细致,下面说说具体的实现原理! 1.Writ ...

  8. Web图片编辑控件升级日志-Xproer.ImageEditor

    版权所有 2009-2014 荆门泽优软件有限公司 保留所有权利 官方网站:http://www.ncmem.com 产品首页:http://www.ncmem.com/webplug/image-e ...

  9. Swift：使用CAShapeLayer打造一个ProgresssBar

    ProgressBar是一个很小却在很多地方都会用到的东西.也许是网络连接,也许APP本身有很多东西需要加载的.默认的只有一个旋转的菊花,对于打造一款个性的APP这显然是不够的.这里就使用CAShap ...

  10. .NET基础 （17）反射

    反射1 请解释反射的基本原理和其实现的基石2 .NET提供了哪些类型来实现反射3 如何实现动态地发射程序集4 如何利用反射来实现工厂模式 反射1 请解释反射的基本原理和其实现的基石 反射是一种动态分析 ...