canvas效果二———折线图

最新推荐文章于 2023-08-14 17:17:23 发布
最新推荐文章于 2023-08-14 17:17:23 发布
阅读量213 收藏
点赞数
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TISRNW/article/details/103200215
版权

效果图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}

			html,
			body {
				height: 100%;
				width: 100%;
				position: relative;
			}

			#box {
				height: 100%;
				width: 300px;
				background-color: #177CB0;
				position: absolute;
				/* overflow: hidden; */
				/* display: flex; */
			}

			#canvas {
				display: block;
				position: absolute;
				right: 0px;

			}

			#top {
				height: 200px;
				width: 100%;
				background-color: #177cb0;
				color: white;
				font-size: 30px;
				/* font-family: '宋体'; */
				border-bottom: 2px solid gray;
				text-align: center;
				/* margin-top: 150px; */
				line-height: 200px;
overflow: hidden;

			}
			.text{
				height: 50px;
				width: 90%;
				background-color: green;
				border-radius: 15px;
				color: white;
				text-align: center;
				line-height: 50px;
				font-size: 25px;
				margin: 10px auto;
				box-shadow: 0px 0px 4px rgba(0,0,0,0.5);
				user-select:none ;
			}
			.text:hover{
				box-shadow: 0px 0px 7px rgba(0,0,0,0.8);
				cursor: pointer;
			}
			ul{
				list-style: none;
			}
			li{
				height: 40px;
				width: 60%;
				margin: 10px auto;
				
				position: relative;
			}
			.one{
				width: 40px;
				height: 100%;
				background-color: green;
				border-radius: 10px 0px 0px 10px ;
				line-height: 40px;
				text-align: center;
				float: left;
				margin-left: 10px;
				font-size: 20px;
				color: white;
			}
			input{
				height:40px ;
				width: 40px;
				border-radius: 0px 10px 10px 0px;
				border: none;
			    float: left;
				/* background-color: #808080; */
				font-size: 20px;
			}
			.show{
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div id="top">
				折线图
			</div>

			<div class="text" id="init">
				开始绘制
			</div>
			<div class="text" id="zuobiao">
				生成坐标
			</div>
			<div class="text" id="input">
				插入坐标
			</div>
			<ul class="show">
				<li>
					<div class="one">
						X
					</div><input type="text"/>
					<div class="one">
						Y
					</div><input type="text"/>
					
				</li>
				<li>
					<div class="one">
						X
					</div><input type="text"/>
					<div class="one">
						Y
					</div><input type="text"/>
					
				</li>
				<li>
					<div class="one">
						X
					</div><input type="text"/>
					<div class="one">
						Y
					</div><input type="text"/>
					
				</li>
				
			</ul>
			<div class="text" id="draw">
				生成图像
			</div>

		</div>
		<canvas id="canvas"></canvas>
		<script type="text/javascript">
			var canvas = document.getElementById('canvas')
			var c = canvas.getContext('2d')
			var cw = canvas.width = window.innerWidth - 300
			var ch = canvas.height = window.innerHeight
			c.fillStyle = 'papayawhip'
			c.fillRect(0, 0, cw, ch)
			var begin = document.getElementById('init')
			//第一个功能实现
			var arrX = []
			var arrY = []
			var lineLength = 30
			var init = function(){
				
				//获取每个格子三十像素有几个
				
				sumX =parseInt(cw/lineLength)+1
				sumY = parseInt(ch/lineLength) +1
				c.setLineDash([2,3])
				// console.log(sumX,sumY)
				//将每一个格子像素的位置存进数组里
				for(var i=0;i<sumX;i++){
					arrX.push(i*30)
				}
				for(var j=0;j<sumY;j++){
					arrY.push(j*30)
				}
				//开始画线
				for(var i= 0;i<arrX.length;i++){
					c.beginPath()
					c.moveTo(arrX[i],0)
					c.lineTo(arrX[i],ch)
					c.strokeStyle = 'lightpink'
					c.stroke()
					c.closePath()
				}
				for(var i= 0;i<arrY.length;i++){
					c.beginPath()
					c.moveTo(0,arrY[i])
					c.lineTo(cw,arrY[i])
					c.strokeStyle = 'lightpink'
					c.stroke()
					
				}
			}
			begin.addEventListener('click',function(){
				init()
			})
			
			//第二个功能
			var zuobiao = document.getElementById('zuobiao')
			var x1 = lineLength*3
			var y1 = lineLength*18
			var drawTwo = function(){
				
				c.setLineDash([2,0])
				c.lineWidth = '3'
				c.lineCap = 'round'
				c.beginPath()
				c.moveTo(x1,y1)
				c.lineTo(x1+20*lineLength,y1)
				c.lineTo(x1+20*lineLength-10,y1-10)
				c.lineTo(x1+20*lineLength,y1)
				c.lineTo(x1+20*lineLength-10,y1+10)
				c.strokeStyle = 'red'
				c.stroke()
				c.closePath()
				
				c.beginPath()
				c.moveTo(x1,y1)
				c.lineTo(x1,y1-16*lineLength)
				c.lineTo(x1-10,y1-16*lineLength+10)
				c.lineTo(x1,y1-16*lineLength)
				c.lineTo(x1+10,y1-16*lineLength+10)
				c.stroke()
				c.closePath()
				
				for(var i =0;i<20;i++){
					c.fillStyle = 'red'
					c.font = '25 微软雅黑'
					c.fillText(i,x1+i*30-5,y1+17)
				}
				for(var i = 1;i<16;i++){
					c.fillStyle = 'red'
					c.font = '25 微软雅黑'
					if(i<10){
						c.fillText(i,x1-18,y1-i*30+4)
					}else{
						c.fillText(i,x1-20,y1-i*30+4)
					}
					
				}
			}
			zuobiao.addEventListener('click',function(){
				drawTwo()
			})
			
			//第三个功能插入坐标
			var inputs = document.getElementById('input')
			// var ul = document.getElementsByTagName('ul')
			var shows = document.getElementsByClassName('show')[0]
			inputs.addEventListener('click',function(){
		    shows.style.display = 'block'
			})
			//第四个功能
			var inarr = []
			var drawImg = function(){
				c.beginPath()
				c.moveTo(inarr[0][0],inarr[0][1])
				for(i = 1;i<inarr.length;i++){
					c.lineTo(inarr[i][0],inarr[i][1])
				}
				c.strokeStyle = 'red'
				c.stroke()
				c.closePath()
			}
			
			
			
			var draw = document.getElementById('draw')
			draw.addEventListener('click',function(){
				var lis = document.getElementsByTagName('li')
				
				for(var i=0;i<lis.length;i++){
					var ins = lis[i].getElementsByTagName('input')
					 inx2 =x1+ins[0].value*30;
					 iny2 =y1-ins[1].value*30;
					 if(inx2 && iny2){
						 inarr.push([inx2,iny2])
					 }
				}
				if(inarr == []){
					
				}else{
					drawImg()
				}
				
			})
		</script>

	</body>
</html>
雕琢时光纸戆
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
初探canvas制作一个折线图——（面向对象）
Chad97的博客
10-30 963
canvas 准备一块画布 &lt;style&gt; canvas { border: 1px solid #ccc; } &lt;/style&gt; &lt;canvas width="600" height="400"&gt;&lt;/canvas&gt; 起步——start &lt;script&gt;
web 前端绘制折线_HTML5+CSS3从入门到精通 canvas绘制折线图详解
weixin_34255938的博客
01-17 1725
本篇教程探讨了HTML5+CSS3从入门到精通 canvas绘制折线图详解，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通 。<遇到的问题：Retina屏上字体线条模糊问题解决方案：放大canvas的大小，然后用css压缩回原大小，例如：想要900*400的画布，先将画布设置为width="1800px"height="800px"，再用css{width:...
HTML5 Canvas 3D折线图表.zip
07-04
HTML5 Canvas 3D折线图表是一款基于canvas的3D折线图表，图表在初始化的时候会根据数据点把折线分割成多条线段，然后线段将逐渐悬浮到数据点对应数值的位置。由于是3D的效果，所以图表的折线也和其他折线图表的不同。
canvas绘制经典折线图(一)
weixin_39037804的博客
10-23 566
最终效果图如下： 实现步骤如下：注-引用了jQuery HTML代码 <!doctype html> <html lang="en"> <head> <meta charset="UTF-...
使用canvas绘制24小时折线图
最新发布
weixin_46328739的博客
08-14 258
【代码】使用canvas绘制24小时折线图。
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]) # 保存图像...
自定义view之——折线图
11-28
本教程将深入探讨如何自定义一个折线图，即“自定义view之——折线图”。折线图是一种常见的数据可视化工具，常用于展示连续数据的变化趋势。 首先，我们需要创建一个新的Java类，继承自`View`或`ViewGroup`。在这...
安卓Android源码——折线统计图.zip
10-11
本压缩包“安卓Android源码——折线统计图.zip”提供了实现折线图的源代码，我们可以从中学习到如何在Android应用中创建自定义视图（DrawView）来绘制动态的折线图。 1. **自定义视图（DrawView）** 在Android中，...
安卓Andriod源码——折线统计图.zip
10-13
在实际应用中，可能需要为折线图添加动态效果，比如平滑过渡、数据更新时的动画等。这可以通过控制`View`的重绘过程，逐步更新数据并调用`invalidate()`来实现。 5. **响应触摸事件** `DrawView`通常还需要处理...
html5画折线图
fei_xh的专栏
03-28 4756
仪表盘 行车记录 驾驶行为 爱车环保
CSS折线
weixin_30706691的博客
08-27 3107
// 写在vue项目中的<template> <div id="app"> <div class="list"> <div class="item" v-for="(item,index) in list" :key="index"> <ul :class="`dot_box dot...
web 前端绘制折线_前端每日实战：苦练 CSS 基本功——图解辅助线的原理和画法...
weixin_39998998的博客
12-23 1484
在用 CSS 进行绘图和布局时，除了借助浏览器开发工具之外，还经常需要绘制一些辅助线，以便定位参考。今天就以第 170 号作品中使用的网格线为例，详细讲解一下辅助线的原理和画法。为了使辅助线明显可见，把线的颜色设置为和背景对比强烈的白色，并且线也粗一些，在实际使用时，你应该降低辅助线与背景的对比并且使用细线。分步图解1、定义容器div { font-size: 50px; width:...
使用CSS border绘制箭头
SuperCoooooder的博客
04-29 7830
在日常开发的过程中，一些小图标，例如小箭头，都是比较常用的，最近看到了一个用CSS绘制小箭头的方法，但是对其实现原理不是很清楚，于是就探究了一下：     先贴一下绘制箭头的代码： HTML: CSS: .arrow{ width: 0; height: 0;
02.微信小程序——AntV F2制作柱状图，折线图
杜小叶的博客
04-23 8155
最近需要在微信小程序中画折线图和柱状图，想到了之前用到的AntV F2，总的来说还不错。效果图可以用微信看simaQ老哥做的微信小程序Demo。本人没学过npm，甚至不知道npm是什么 ，所以有不对的地方还请各位指出。 AntV F2图表示例：https://antv.alipay.com/zh-cn/f2/3.x/demo/index.html simaQ做的小程序demo 于是参照了...
HenCoder Android 开发进阶：自定义 View 1-3 文字的绘制
weixin_33796205的博客
07-24 466
这期是 HenCoder 自定义绘制的第三期：文字的绘制。 之前的内容在这里：HenCoder Android 开发进阶 自定义 View 1-1 绘制基础HenCoder Android 开发进阶 自定义 View 1-2 Paint 详解 如果你没听说过 HenCoder，可以先看看这个：HenCoder：给高级 Android 工程师的进阶手册 简介 上期的 Paint 详解里已经说过，文...
HTML写一个登录框样式
热门推荐
TISRNW的博客
09-19 1万+
以QQ空间的登陆框为例，原先的代码很复杂，还涉及了其他的知识，对于刚刚接触的人来说想写一点点样式来练练手的话可以看一下。 写好之后是这个样子 下面是代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <styl...
用js做一个简单的计算器
TISRNW的博客
10-29 1765
实现并不困难 1，我们首先把样式写出来 2，写出来之后我们用js获取我们每次点击的数值，将其运算等等并将其填充到我们写的显示屏上。 3，对于清零，取反，取百分数代码中有详细说明。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title&g...
使用Canvas实现图片分割效果
对于文章中提到的两个主要效果——图片内容的打乱和复原，以及图片之间的切换，都是通过改变`drawImage`的参数实现的。打乱效果可以通过随机改变每个矩形的绘制位置（即随机位移）来完成，而复原则需要按照原始的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值