canvas学习——画折线图

最新推荐文章于 2024-05-14 02:27:52 发布
最新推荐文章于 2024-05-14 02:27:52 发布
阅读量1.2k 收藏 1
点赞数 1
文章标签： canvas 折线图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42746590/article/details/88824673
版权

今天简单的看了下：下面是静态的，注释详细很简单

折线图绘制 
<body style="background-color: #f3f3f3">
	<canvas id="canvas" width="1000" height="650" style="background-color: #b1f3ff"  ></canvas>
	<script>
		var canvas = document.getElementById("canvas");
		var startX = 100;
		var startY = 600;
		var ctx = canvas.getContext('2d');
		// //设置边框
        // ctx.lineWidth = 1;//设置边框大写
        // ctx.fillStyle = "yellow";//填充实体颜色
        // ctx.strokeStyle = "red";//填充边框颜色
        // ctx.strokeRect(50.5,50.5,100,100);//对边框的设置
        // ctx.fillRect(0,0,1000,650);//对内容的设置
		//坐标轴坐标
		var data = [0,100,200,300,400,500,600];
		//坐标点
		var point = [[100,200],[150,230],[200,190],[250,240],[300,300],[350,270],[400,500],[450,400],[500,100]];
		//建立坐标系
		function creat(){
			ctx.beginPath();
			ctx.moveTo(startX,50);
			ctx.lineTo(startX,startY);
			ctx.moveTo(startX,startY);
			ctx.lineTo(650,startY);
			ctx.closePath();
			ctx.stroke();

		}
		//填充横纵坐标
		function insert(){
			var x = 100;
			var y = 600;
			//绘制横坐标
			for(var i in data){
				ctx.fillText(data[i],x,y+20);
				x +=100;
			}
			x = 100;
			y = 600;
			//绘制纵坐标
			for(var i in data){
				ctx.fillText(data[i],x-20,y);
				y -=100;
			}
		}
		//绘制折线
		var num = 0;
		var sh = setInterval(function(){
			//只有第一个点重新开始绘制
			if(num == 0)
				ctx.beginPath();
			//终止
			if(num == 8){
				clearInterval(sh);
			}
			var x = point[num][0];
			var y = point[num][1];
			//转换坐标
			x += 100;
			y = startY - y;
			ctx.arc(x,y,2,0,2*Math.PI);
			//进行点的内部链接
			if(num != 0)
				ctx.lineTo(x,y);
			num++;
			ctx.moveTo(x,y);
			ctx.strokeStyle = "#b320ff";
			//；连接边框
			ctx.stroke();
			console.log(num);
		},400);
		creat();
		insert();
	</script>
</body>

动态待续~

走zou-ting停
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
canvas学习day1——简易折线图，foreach的用法,数据可视化
weixin_41571938的博客
04-25 241
在指定位置画多个点 效果图 1、坐标轴前面说过了 2、点 点的话其实就是一个放小的正方形，利用ctx.fillRect( 30, 170, 50, 50 );函数，四个参数分别为X Y点坐标，高度，宽度，所以这里只要找到X Y的坐标即可，这里前一章分析坐标轴原点的时候就分析过了，不再分析 3、折线 非常简单，第一个点连接第二个，第二个连接第三个，用foreach函数遍历即可 foreach的用法 也常见用于前端页面的渲染 var points = [ [ 10, 10 ], [ 40, 20 ], [ 50
自定义view之——折线图
11-28
本教程将深入探讨如何自定义一个折线图，即“自定义view之——折线图”。折线图是一种常见的数据可视化工具，常用于展示连续数据的变化趋势。 首先，我们需要创建一个新的Java类，继承自`View`或`ViewGroup`。在这...
4.canvas绘制基本图形——折线
qq_44473483的博客
09-28 416
在日常生活中，除了矩形与圆弧外，接触最多的就是折线了。甚至矩形也可以看出是一段折线，所以我们自然也可以使用绘制折线的方式绘制出矩形。
2024年HTML5——Canvas图表插件 chart，牛逼
2401_85012088的博客
05-14 577
Chart.js有两种不同的版本。常规版本的Chart.js和 Chart.min.js，附带chart.js库的同时还带着颜色解析器。如果你想使用这个版本并且在你的图表中使用时间轴，你需要在安装Chart.js之前安装上Moment.js。而另一个版本Chart.bundle.js 和Chart.bundle.min.js早就包含了Moment.js。你唯一需要注意的就是两个版本只能安装一个，否则会引起错误。
H5获取MySQL的值画折线图_HTML5 Canvas——折线图
weixin_29560137的博客
02-06 212
/*1.绘制网格 网格大小 10px 网格的颜色 #ddd*//*2.绘制坐标 轴的离边距离 20px 箭头的尺寸 10px*//*3.绘制点 点尺寸 6px*//*4.连接点*//*5.准备数据*/var data =[{ x:50, y: 90},{ x:150, y: 150},{ x:250, y: 250},{ x:350, y: 130},{ x:450, y: 80}]/*使用...
canvas效果二———折线图
TISRNW的博客
11-22 203
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> * { margin: 0px; padding: 0px; } html...
前端——用Canvas绘制折线图
Searchin_R的博客
09-19 2874
通过CanvasRenderingContext2D对象能够获得绘制矩形的方法，但是想要绘制圆形椭圆等图形，必须在canvas上启用路径，借用路径来绘制图形。 而绘制折线图最主要用到的就是 moveTo（）和lineTo（）。 这两种方法很好区分： moveTo（double x,double y） 把Canvas的当前路径的结束点移动到x、y对应的点。 lineTo（double...
带你快速玩转canvas——写个折线图
weixin_34349320的博客
12-15 171
需求： 1. 自适应父Dom的宽高，但设置canvas元素的最小宽高，小于最小宽高则设置父Dom带滚动条。 2. 窗口大小变化时，重新绘制折线图，以适应新的大小，保证折线图一直以最好效果展现； 3. x轴的坐标尺度为时间，单位是月份，数据类型是数组，数组元素是字符串，格式类似"2016/12"这种，为了方便，假设x轴固定有12个刻度，初始刻度为x=0的...
chart.js使用学习——折线图（1：基本用法)
gc_2299的博客
08-18 4543
学习chart.js中折线图的基本用法
HTML5 Canvas——折线图
weixin_30349597的博客
10-18 142
<script type="text/javascript"> /*1.绘制网格 网格大小 10px 网格的颜色 #ddd */ /*2.绘制坐标 轴的离边距离 20px 箭头的尺寸 10px */ /*3.绘制点 点尺寸 6px */ /*4.连接点 */ /*5.准备数据*/ var data = [ ...
百度地图 html画折线,【IT专家】百度地图简单使用——添加折线,圆形等(html,js)...
weixin_28340315的博客
07-04 411
百度地图简单使用——添加折线，圆形等(html，js)2015/07/31 0 地图覆盖物概述所有叠加或覆盖到地图的内容，我们统称为地图覆盖物。如标注、矢量图形元素(包括：折线和多边形和圆)、信息窗口等。覆盖物拥有自己的地理坐标，当您拖动或缩放地图时，它们会相应的移动。地图API提供了如下几种覆盖物：Overlay：覆盖物的抽象基类，所有的覆盖物均继承此类的方法。Marker：标注表示地图上的点...
Matplotlib入门笔记(一)——折线图的绘制
01-20
1.1 折线图的绘制与显示 1.1.1 显示一周的天气 # 创建画布, figsize设置画布大小， dpi设置清晰度 plt.figure(figsize=(7, 7), dpi=80) # 绘制图像 plt.plot([1,2,3,4,5,6,7],[17,17,18,15,11,11,13]) # 保存图像...
安卓Android源码——折线统计图.zip
10-11
本压缩包“安卓Android源码——折线统计图.zip”提供了实现折线图的源代码，我们可以从中学习到如何在Android应用中创建自定义视图（DrawView）来绘制动态的折线图。 1. **自定义视图（DrawView）** 在Android中，...
安卓Andriod源码——折线统计图.zip
10-13
总的来说，这个压缩包提供了一个基础的Android折线图实现示例，通过对`DrawView`的学习，开发者可以理解如何在Android中进行自定义绘图，实现自己的数据可视化组件。同时，也可以借鉴其思路，结合现有的图表库，创建...
微信小程序实现折线图的示例代码
10-16
本示例代码将指导你如何在小程序中引入并使用一个第三方插件——wxCharts，来创建一个折线图。 1. **引入插件**： 首先，你需要从GitHub仓库（https://github.com/xiaolin3303/wx-charts）下载或引用`wxcharts.js`...
基于Springboot和Vue的图书借还管理系统源码 图书借还管理系统代码（高分毕设）
最新发布
07-28
图书借还管理系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！
C语言内存管理：静态与动态分配的较量
07-28
C语言是一种通用的编程语言，由丹尼斯·里奇（Dennis Ritchie）在20世纪70年代早期于美国电话电报公司（AT&T）的贝尔实验室开发。C语言以其高效性、灵活性和可移植性而闻名，它是一种过程式编程语言，提供了对底层硬件的直接访问能力。 C语言的特点包括： 1. **简洁高效**：C语言的语法简洁，执行效率高，适合编写系统软件。 2. **接近硬件**：C语言提供了对内存地址和位操作的直接控制，使其非常适合硬件级编程。 3. **可移植性**：C语言编写的程序可以在不同的操作系统和硬件平台上编译和运行，具有很好的可移植性。 4. **丰富的库支持**：C语言拥有大量的标准库，如标准输入输出库（stdio.h）、数学库（math.h）等。 5. **结构化编程**：C语言支持结构化编程，允许使用循环、条件判断和函数等控制结构。 6. **指针**：C语言的指针功能强大，可以操作内存地址，实现复杂的数据结构和算法。 7. **编译型语言**：C语言是一种编译型语言，源代码需要通过编译器转换成机器码才能运行。 C语言广泛应用于操作系统（如Unix和Linux）、嵌入式系统、高性能
通讯协议规范-命令包格式
07-28
提供一份通讯协议规范，包含命令包、格式等，在上下位机调试的时候可参考该文档，制定对应的通讯协议。
HTML5之Canvas绘图——Canvas画布调整之移动、缩放、旋转
05-24
Canvas是HTML5新增的一个用于绘制图形的标签，可以通过JavaScript来控制Canvas进行图形的绘制。在进行Canvas绘制时，可以通过调整画布的位置、大小和旋转角度等属性，来控制绘制出来的图形的位置和形态。 下面我们就来介绍一下Canvas画布的移动、缩放和旋转： 1. 画布移动 画布移动可以通过Canvas提供的translate方法来实现。translate方法接收两个参数，分别表示x轴和y轴方向上的偏移量。偏移量为正值表示向右或向下移动，为负值表示向左或向上移动。 例如，我们可以通过下面的代码将画布向右移动50个像素，向下移动100个像素： ``` context.translate(50, 100); ``` 2. 画布缩放 画布缩放可以通过Canvas提供的scale方法来实现。scale方法接收两个参数，分别表示x轴和y轴方向上的缩放比例。缩放比例为大于1的值表示放大，小于1的值表示缩小。 例如，我们可以通过下面的代码将画布在x轴和y轴方向上都放大2倍： ``` context.scale(2, 2); ``` 3. 画布旋转 画布旋转可以通过Canvas提供的rotate方法来实现。rotate方法接收一个参数，表示旋转的角度，单位为弧度。 例如，我们可以通过下面的代码将画布旋转45度： ``` context.rotate(Math.PI / 4); ``` 需要注意的是，Canvas绘图的坐标系原点默认在画布的左上角，而移动、缩放和旋转操作都是相对于原点进行的。因此，在进行这些操作时，需要先将画布的原点移动到需要的位置，再进行操作。例如，如果需要将画布向右移动50个像素，需要先将原点移动到（50，0）的位置，再进行移动操作： ``` context.translate(50, 0); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值