前端------ canvas 绘制折线图详解

最新推荐文章于 2024-06-06 11:39:14 发布

对明天的期待丶

最新推荐文章于 2024-06-06 11:39:14 发布

阅读量9.4k

点赞数 7

文章标签： KK

本文链接：https://blog.csdn.net/qq_39429962/article/details/82780110

版权

canvas时html5新添加的一个画布标签。

他有很多属性，大家可以在下边网址查看：

http://www.w3school.com.cn/tags/html_ref_canvas.asp

画布canvas中涉及到坐标运算，它是以浏览器空白左上角为起点，然后根据像素进行变化的一个元素，话不多说，下边是一个折线图的demo：

效果图如下：

源代码：

<!DOCTYPE html>
<html>
	<head>
		<title>只属于你的折线图！</title>
	</head>
	<body style="background-color:#f3f3f3"> 
		<canvas id="canvas" width=1000 height=650></canvas>
		<script>
			var canvas = document.getElementById("canvas");
			var startX = 100;
			var startY = 600;
			var ctx = canvas.getContext('2d');
			var data = [0,100,200,300,400,500];		//坐标轴坐标
			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 = "#3FA7DC";
				//连接边框
				ctx.stroke();
				console.log(num);
			}, 400);
			creat();
			insert();
		</script>
	</body>
</html>

对明天的期待丶

关注

7
点赞
踩
26

收藏

觉得还不错? 一键收藏
1
评论
前端------ canvas 绘制折线图详解

canvas时html5新添加的一个画布标签。他有很多属性，大家可以在下边网址查看：http://www.w3school.com.cn/tags/html_ref_canvas.asp画布canvas中涉及到坐标运算，它是以浏览器空白左上角为起点，然后根据像素进行变化的一个元素，话不多说，下边是一个折线图的demo：效果图如下：源代码：&lt;!DOCTYPE ht...
复制链接

扫一扫