Canvas 根据比例画折线图

最新推荐文章于 2024-07-03 09:18:53 发布
最新推荐文章于 2024-07-03 09:18:53 发布
阅读量645 收藏
点赞数
分类专栏： Canvas 文章标签： canvas 折线图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/houyanhua1/article/details/79885319
版权
本文演示如何在HTML中利用Canvas API和line.js库，根据指定比例绘制出精准的折线图。通过这个Demo，开发者可以了解Canvas绘图的基础以及如何封装JS来实现动态图表生成。
摘要由CSDN通过智能技术生成


demo.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <canvas id="cvs" width="500" height="500"></canvas>
    <script>
        var cvs = document.getElementById('cvs');
        var ctx = cvs.getContext('2d');

        ctx.lineWidth = 2;

        // 坐标轴距离画布上右下左的边距
        var padding = {
            top: 20,
            right: 20,
            bottom: 20,
            left: 20
        }

        // 坐标轴中箭头的宽和高
        var arrow = {
            width: 12,
            height: 20
        }

        // 求坐标轴上顶点的坐标
        var vertexTop = {
            x: padding.left,
            y: padding.top
        }

        // 求坐标轴原点的坐标
        var origin = {
            x: padding.left,
            y: cvs.height - padding.bottom
        }

        // 求坐标轴右顶点的坐标
        var vertexRight = {
            x: cvs.width - padding.right,
            y: cvs.height - padding.bottom
        }


        // 画坐标轴中的两条线
        ctx.moveTo( vertexTop.x, vertexTop.y );
        ctx.lineTo( origin.x, origin.y );
        ctx.lineTo( vertexRight.x, vertexRight.y );
        ctx.stroke();

        // 画上顶点箭头
        ctx.beginPath();
        ctx.moveTo( verte
最低0.47元/天 解锁文章
houyanhua1
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生canvas实现折线图封装
07-01
canvas画折线图
[极致用户体验] 如何实现响应式canvas？保持canvas比例？教你让canvas自适应屏幕宽度！
Hull Qin
08-31 8329
用户体验好的canvas应有2个特性: 一屏展示全、比例与初始屏幕一致，且缩放过程中，比例不变并尽量撑满屏幕。本文教你如何实现这种极致用户体验的响应式canvas。
用canvas画一个折线图
最新发布
大华的程序人生
07-03 143
代码比较简单，记录一下，采用随机生成数值的方式，每次加载折线会变化。
canvas--标尺
蒲厷渶と戀的博客
05-31 6412
项目开发过程中，会遇到标尺的功能，标尺可以通过canvas来实现，具体实现如下：1、html代码：&lt;canvas id='canvas' width='800' height='800' /&gt;2、css代码：body {     background: #eeeeee; } #canvas {     background: #ffffff;     cursor: pointer; ...
如何利用canvas构建百分比刻度槽
wind_raise的博客
01-14 537
废话不多说，先上效果图： 本来按照网上找到的方法进行绘制的时候，发现要先画一个外圆，然后再画一个内圆。。。（此处省略），尝试过一次后发现直接画线即可。 分享一下自己的代码 initCanvas(canvas){ //当前视口宽度 let nowClientWidth = document.documentElement.clientWidth; // 换算方法 let nowSize = functi
Canvas Scaler 笔记
daomingxiong的博客
02-22 396
来源于官方文档翻译画布缩放器组件用于控制画布中UI元素的整体比例和像素密度。 此缩放会影响Canvas下的所有内容，包括字体大小和图像边界。UI Scale Mode：Constant Pixel Size、Scale With Screen Size、Constant Physical SizeConstant Pixel Size：保持UI控件的原始像素大小，不随屏幕改变Scale With ...
JavaScript canvas绘制折线图
10-15
本教程将深入讲解如何使用Canvas API来绘制折线图。折线图是一种常见的数据可视化方式，用于显示随时间变化的数据趋势。 首先，我们需要创建一个`LineChart`构造函数，它接收一个canvas上下文作为参数。在这个构造...
canvas-2:canvas 折线图
05-12
为了画出折线图，我们需要遍历数据并连接各个点： ```javascript ctx.beginPath(); ctx.moveTo(50, canvas.height - (data[0] * canvas.height / 100)); // 第一个点 for (var i = 1; i ; i++) { var x = 50 + ...
android 安卓 canvas 绘制折线图
05-30
对于礼拜数、月份日期和年度月份的切换，可以提供一个下拉菜单或者滑动条让用户选择，然后根据选择的类型重新计算和绘制折线图。 在绘制过程中，我们还需要考虑颜色、线宽、标记点等视觉元素。例如，可以使用不同...
Android通过Canvas手绘一个折线图
04-05
在Android开发中，Canvas是用于在屏幕上绘制图形的重要工具，它可以让我们实现自定义视图，包括绘制复杂的图表，如折线图。折线图是一种常用的数据可视化方式，它可以帮助我们直观地理解数据的变化趋势。本篇文章将...
android自定义折线图曲线图
10-15
在Android开发中，自定义视图是实现特定图形或交互效果的重要手段，而自定义折线图和曲线图则是数据可视化中的常见需求。本篇将深入探讨如何在Android环境中实现这两种图表。 首先，我们需要理解折线图和曲线图的...
Canvas实现时间刻度标尺功能
绳墨BigHead
02-19 3551
Canvas实现时间刻度标尺功能 前言:项目中需要实现一个时间标尺的功能,展示某个人在某段时间内已经被订单占用的时间,并且展示当前订单在标尺中的占用位置,大概为下图的样子 大概的实现逻辑如下: 计算时间刻度跨度。canvas总宽度为320,高度为40,注意,canvas的宽度不能使用css来写,会导致计算混乱,直接写在标签内,一共显示8个时间区域，所以每个刻度之间的宽度为320/8=40 利用canvas画一条线,X轴起点为0,终点点为320,Y轴起终点都是25,只所以不放到最底下,是因为需要给显示时间
canvas总结：绘图表面大小和元素大小
一杯清茶的博客
04-19 929
canvas总结：绘图表面大小和元素大小 1.默认大小 如果不设置canvas大小，浏览器默认的大小是300*150. 我们可以通过canvas属性设置w、h： <canvas id="canvas" width="600" height="300"></canvas> 也可以通过css设置canvas大小： #canvas { width: 800px; height: 400px; } 2.使用
Canvas之绘制折线图
Welkin_qing的博客
11-27 4660
一、 绘制网格 绘制网格 网格的大小 网格的条数，横线条数，竖线条数，画布高度 网格的条数我们根据画布的大小来对网格大小进行相除，取整 &amp;lt;script&amp;gt; var myCanvas = document.querySelector('canvas'); var ctx = myCanvas.getContext('2d'); /*1.绘制网格*/ /...
canvas绘制直线、折线、矩形与多边形
热门推荐
zhang_cherry的博客
01-09 1万+
1、canvas的width和height属性与style中的width和height的区别 canvas是html5新增的绘图工具。通过canvas标签创建画布后，它有三个基本要素：id、宽度和高度。 特别注意的是：canvas的宽度和高度不能在style里面设置，因为此时设置的是div的宽度和高度，canvas会使用默认的宽度（300px），高度（150px）。 <canvas id="canvas" width="200px" height="200px" style="border: #138
开发案例：使用canvas实现图表系列之折线图
hdbdhdbh的博客
02-21 1184
以上是本次技术分析，希望能对大家有所启发，也祝愿各位开发者能开发出理想的效果，后续我们会把 chart 相关系列的组件封装到组件库发布到市场上，这样可以直接开箱即用了。敬请期待吧，后续还有很多技术的分享，不要错过！最后分享一份鸿蒙（HarmonyOS）开发学习指南。
4.canvas绘制基本图形——折线
qq_44473483的博客
09-28 444
在日常生活中，除了矩形与圆弧外，接触最多的就是折线了。甚至矩形也可以看出是一段折线，所以我们自然也可以使用绘制折线的方式绘制出矩形。
canvas折线图
cjx177187的博客
07-22 489
利用连接起点到终点，将上一个的终点当作下一个线条的起点，再次连接，重复直至遍历所有的数据，就成为了折线图。//重新修改canvas宽度，相当于canvas重写，因为修改了canvas的宽度在js中相当于修改了canvas的编码，所以相当于重写。利用for循环遍历假数据，将假数据作为点的Y坐标添加到网格图中。//添加计时器，定时往数组中添加一个130-70的随机数。//添加计时器，定时清楚线条和重新画图【网格图和折线图】//遍历数组画出折线图,将数组中的数据当作y坐标画出来。//画一个60×60的网格图。..
Canvas 绘制折线图 - 使用prototype属性构建对象
DevOps海洋的渔夫@专栏
01-13 691
需求 前面的几篇文章介绍了如何绘制网格图、坐标系、坐标系中的点，那么本篇章将这些步骤方法，以js原型面向对象的方式开发，编写出一个折线图的示例。 构建对象的思路 为了更加好方便地使用绘画折线图的方法，应该要将其各个绘制写成对应的对象方法。那么构建对象方法有很多种，本篇将使用prototype属性构建绘画折线图的对象。 如果需要构建一个绘画折线图的对象，基于前面几篇绘制网格图、坐标系...
canvas根据坐标轴画折线
06-01
好的，下面是实现方法： 1. 首先准备一个canvas元素和一个绘制上下文（canvas.getContext("2d")）。 2. 设定坐标轴的起始点、结束点和轴线的颜色、粗细等样式。 3. 通过绘制直线的方法lineTo()和moveTo()，在画布上绘制出横纵坐标轴。 4. 根据折线的坐标数组，使用lineTo()方法依次连接每个坐标点。在连接每个坐标点时，需要根据坐标轴的起始点和结束点来计算出实际的坐标位置。 5. 最后，使用stroke()方法将折线绘制出来。 下面是一个简单的绘制折线的示例代码： ```html <canvas id="myCanvas" width="400" height="400"></canvas> <script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); // 设置坐标轴的起始点、结束点和轴线的颜色、粗细等样式 ctx.beginPath(); ctx.moveTo(50, 350); ctx.lineTo(350, 350); ctx.moveTo(50, 50); ctx.lineTo(50, 350); ctx.strokeStyle = "#000"; ctx.lineWidth = 2; ctx.stroke(); // 定义折线的坐标数组 var data = [20, 50, 80, 120, 200, 300]; // 根据坐标轴的起始点和结束点计算出实际的坐标位置，并使用lineTo()方法连接每个坐标点 ctx.beginPath(); for (var i = 0; i < data.length; i++) { var x = 50 + i * 50; var y = 350 - data[i]; ctx.lineTo(x, y); } ctx.strokeStyle = "#f00"; ctx.lineWidth = 2; ctx.stroke(); </script> ``` 在上面的示例代码中，我们首先绘制了坐标轴，然后定义了一个包含6个坐标点的数组，最后根据数组数据绘制出了一条折线。你可以根据实际需要修改坐标轴的样式、坐标点的数据和绘制折线的颜色等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值