canvas绘制CPU占用率

最新推荐文章于 2024-04-27 22:23:55 发布

原创

最新推荐文章于 2024-04-27 22:23:55 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#canvas

本文介绍了一个使用HTML5 Canvas和jQuery实现的CPU占用率可视化图表。该图表能够动态显示CPU使用情况，通过圆环图的形式直观地展示当前CPU的占用百分比，并随窗口大小变化而自动调整。

效果：

源码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CPU占用率</title>
	<style type="text/css">
		.myChart{
			border:1px solid #ccc;
		}
	</style>
</head>
<body>
	<canvas class="myChart" id="myChart"></canvas>

	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript">
		var canvas_cpu = document.getElementById("myChart");
		var context = canvas_cpu.getContext("2d");

		if (!canvas_cpu.getContext) { // 浏览器不支持canvas
			return;
		}
        
		// 创建文字：canvas 2D对象，内容文字，画布X轴，Y轴，样式
		function DrawCPUText(ctx, title, x, y, style) {
			ctx.save();
			ctx.beginPath();
			ctx.font = style.font + " Arial"; 
			ctx.fillStyle = style.color;
			ctx.textBaseline