cavans 画动态柱状图

最新推荐文章于 2025-05-05 17:37:01 发布

原创最新推荐文章于 2025-05-05 17:37:01 发布 · 2.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#canvas #html5 #css #js

笔记专栏收录该内容

3 篇文章

订阅专栏

博客直接给出了基于HTML5、CSS和JS的Canvas代码，并展示了相应效果图，聚焦于信息技术领域的前端开发内容。

1.直接上代码

<head>
	<meta charset="UTF-8">
	<title>唐僧洗发用飘柔</title>
	<style>
		canvas {
			background-color: yellow;
		}
	</style>
</head>

<body>

	<canvas id="myCanvas" width="600" height="600"></canvas>
	<script>
	
		var myCanvas = document.getElementById("myCanvas");
		var ctx = myCanvas.getContext('2d');
		
		//画X轴
		ctx.beginPath();
		ctx.moveTo(10, 500);
		ctx.lineTo(500, 500);
		ctx.strokeStyle = "red";
		ctx.stroke();
		//画X轴上面的三角形箭头
		ctx.beginPath();
		ctx.moveTo(500, 495);
		ctx.lineTo(500, 505);
		ctx.lineTo(505, 500);
		ctx.closePath();
		ctx.fill();

		//画y轴
		ctx.beginPath();
		ctx.moveTo(10, 500);
		ctx.lineTo(10, 10);
		ctx.stroke();

		//画X轴上面的三角形箭头
		ctx.beginPath();
		ctx.moveTo(5, 10);
		ctx.lineTo(15, 10);
		ctx.lineTo(10, 5);
		ctx.closePath();
		ctx.fill();

		function lineTag(lu) {
			var len = parseInt(500 / lu);
			for(var i = 1; i < len; i++) {
				ctx.beginPath();
				ctx.lineWidth = 1;
				ctx.moveTo(10, 500 - lu * i);
				ctx.lineTo(20, 500 - lu * i);
				ctx.strokeStyle = "black";
				ctx.fillText(lu * i, 22, 500 - lu * i);
				ctx.stroke();
			}
		}
		lineTag(50);

		var k=0;
		function drawAll() {
			//绘画线的函数
			k++;
			if(k==100){
				clearInterval(timer);
			}
			function drawLine(d, lh) {
				ctx.beginPath();
				ctx.lineWidth = 40;
				ctx.moveTo(70 * d, 500);
				ctx.lineTo(70 * d, 500 - k*(lh/100));
				ctx.strokeStyle="red";
				ctx.stroke();
			}
			drawLine(1, Math.ceil(Math.random()*5)*1000);
			drawLine(2, Math.ceil(Math.random()*5)*1000);
			drawLine(3, Math.ceil(Math.random()*5)*1000);
			drawLine(4, Math.ceil(Math.random()*5)*1000);
		}

	var timer =	window.setInterval(drawAll, 2000);
	</script>
</body>

2.效果图如下

在这里插入图片描述