效果：

源码：

<!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. Golang之实现（链表）

    链表算法 package main import "fmt" type LinkNode struct { data interface{} next *LinkNode } ty ...

  2. Openssl dgst命令

    一.简介 消息摘要可以对任意长度的消息产生固定长度(16或20个字节)的信息摘要,理论基于单向HASH函数,根据消息摘要无法恢复出原文,所以是安全的:消息原文和消息摘要是一一对应的,所以又被称作指纹. ...

  3. using namespace cv

    在OpenCV中使用 using namespace cv 的作用: 在使用#include语句包含相应头文件后,使用下面语句即可包含相应的Opencv命名空间 using namespace cv; ...

  4. Button或者ImageButton的背景设为透明或者半透明

    Button或者ImageButton的背景设为透明或者半透明 半透明<Button android:background="#e0000000" ... /> 透明& ...

  5. java可视化

    1.java关闭窗口代码. ft.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); IE打开  Weiler-Atherton任意多边形裁剪 http:/ ...

  6. python 命令行工具 fire

    简介 A library for automatically generating command line interfaces. Python Fire is a library for auto ...

  7. CSS3： box-sizing & content-box 属性---元素的border 和 padding 影响内容的 width 和 height解决方案

    /* 关键字 值 */ box-sizing: content-box; box-sizing: border-box; /* 全局 值 */ box-sizing: inherit; box-siz ...

  8. EM 最大似然概率估计

    转载请注明出处 Leavingseason http://www.cnblogs.com/sylvanas2012/p/5053798.html EM框架是一种求解最大似然概率估计的方法.往往用在存在 ...

  9. 创建 Android 项目

    创建 Android 项目 上一页下一页 您也应该阅读 项目概览 本课向您介绍如何使用 Android Studio 创建新的 Android 项目并介绍该项目中的一些文件. 在 Android St ...

  10. Shell编程-01-Shell脚本初步入门

    目录 什么是Shell 什么是Shell脚本 Shell脚本语言的种类 常用操作系统默认Shell Shell 脚本的建立和执行 脚本规范 什么是Shell     简单来说Shell其实就是一个命令 ...