canvas仿芝麻信用分画的一个刻度表(可根据分数变色)

最新推荐文章于 2023-05-15 22:17:25 发布

jingjingke

最新推荐文章于 2023-05-15 22:17:25 发布

阅读量2.3k

点赞数

分类专栏： HTML5 文章标签： html5-canv canvas

本文链接：https://blog.csdn.net/sinat_35261338/article/details/52493616

版权

这篇博客介绍了如何使用HTML5的Canvas API仿制芝麻信用分的刻度表，包括根据分数改变颜色的功能。作者通过五种状态的判断来设定文字颜色、圆环颜色、信用评价和分数位置，详细讲述了实现过程，尤其是旋转刻度和标识当前位置的技术难点。

摘要由CSDN通过智能技术生成

有些时间没练习canvas了，感觉好像略有生疏，这次是canvas仿芝麻信用分画了一个刻度表，没有特别难的地方，不过在计算时也算折腾了一番。

因为需要有五种状态，所以根据传入的值，进入了五种判断，并给字的颜色、圆环的颜色、信用评价、分数在圆环中的位置进入一些赋值与计算，其它就是画canvas。

效果图如下：

这里写图片描述

代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>canvas仿芝麻信用分画的刻度表</title>
</head>
<body>
<canvas id="Canvas01" width="450px" height="450px"></canvas>
<canvas id="Canvas02" width="450px" height="450px"></canvas>
<canvas id="Canvas03" width="450px" height="450px"></canvas>
<canvas id="Canvas04" width="450px" height="450px"></canvas>
<