canvas学习——画折线图

最新推荐文章于 2025-04-08 09:54:27 发布

走zou-ting停

最新推荐文章于 2025-04-08 09:54:27 发布

阅读量1.2k

点赞数 1

文章标签： canvas 折线图

本文链接：https://blog.youkuaiyun.com/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>

动态待续~