用canvas画圆 并根据中间数值百分比显示进度

最新推荐文章于 2024-07-17 15:26:15 发布
最新推荐文章于 2024-07-17 15:26:15 发布
阅读量144 收藏
点赞数 3
文章标签： servlet javascript java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_72200584/article/details/126993006
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
	</style>
	<body>
		<canvas id="mycanvas" width="300" height="300"></canvas>
		<script type="text/javascript">
			var mycanvas = document.getElementById('mycanvas');
			var ctx = mycanvas.getContext('2d');
			//找到画布的中心点
			var canvasX = mycanvas.width / 2;
			var canvasY = mycanvas.height / 2;
			//进度条是100%，所以要把一圈360度分成100份
			var progress = Math.PI * 2 / 100;
			//指定初始加载步长
			var steps = 40;
			ctx.strokeStyle = '#dddddd';
			ctx.lineWidth = 20;
			// ctx.save();
			ctx.beginPath();
			ctx.arc(canvasX, canvasY, 90, 0, Math.PI * 2, false)
			ctx.stroke();
			ctx.closePath();
			ctx.restore();
			ctx.strokeStyle = "red";
			ctx.lineWidth = 20;
			ctx.beginPath();
			ctx.arc(canvasX, canvasY, 90, -Math.PI / 2, -Math.PI / 2 + steps * progress, false);
			ctx.stroke();
			ctx.closePath();
			ctx.restore();
			ctx.fillStyle = "black"; //可改
			ctx.font = "bold 26px Arial"; //可改
			// canvasX-30, canvasY+10  中的加减的数值可改
			if (steps.toFixed(0).length == 3) {
				ctx.fillText(steps.toFixed(0) + '%', canvasX - 30, canvasY + 10);
			} else {
				ctx.fillText(steps.toFixed(0) + '%', canvasX - 20, canvasY + 10);
			}
			ctx.restore();
		</script>
	</body>
</html>

前端--李梓豪
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
canvas arc() 第四个 第五个 参数详解
半朵梨花压海棠
06-04 1943
arc有六个参数：arc(x, y, r, sAngle, eAngle, counterclockwise) x,y表示圆心坐标 r 表示圆的半径 sAngle : 表示开始绘制的角度 eAngle : 表示结束绘制的角度 counterclockwise ： 表示顺时针绘制还是逆时针，false = 顺时针，true = 逆时针，默认值是false 首先 画一个 0π-0.5π ctx.arc(200, 200, 100, 0 * Math.PI, 0.5 * Math.PI, false)
Canvas学习：绘制圆和圆弧
wulixiaoxiao1的博客
03-18 7789
圆和圆弧是图形中基本图形之一，今天我们来了解在Canvas中怎么绘制圆和圆弧。在Canvas中绘制圆和圆弧其实和绘制线段和矩形一样的简单。在Canvas中，CanvasRenderingContext2D对象提供了两个方法（arc()和arcTo()）来绘制圆和圆弧。 与圆和圆弧相关的基础知识 在学习如何绘制圆和圆弧之前，有一些相关的基础知识有必要先进行了解。 角度旋转角度和弧度
利用canvas画百分比圆环
Dolores_me的博客
10-18 358
var c1 = document.getElementById('data-user'); var ctx = c1.getContext("2d"); function getRads (degrees) { degrees = degrees - 90; return (Math.PI * degrees) / 180; } ...
H5 canvas 画圆 画圆角
weixin_45696837的博客
10-23 1460
canvas是H5的一大重点 我们来学一下如何用canvas画圆 画圆 arc(x,y,r,起始弧度，结束弧度，顺逆时针) x,y就是这个圆的圆心坐标 r是圆的半径 弧度单位用Math.PI 顺逆时针用0(顺时针) 1(逆时针) const cas = document.getElementsByTagName('canvas')[0]; const ctx = cas.getContext("2d"); ctx.arc(250,250,100,0,Math.PI / 2,1); ctx.stroke
uni-app canvas绘制动态数据圆环统计图表/进度条同理
晴天有何特别
08-27 6787
uni-app canvas自己动手简单绘制动态数据圆环统计图表 话不多说，上效果图 分析：三类数据占比进行渲染一个圆环统计图，由于设计是这样，下面没有给出颜色与标签， 界面代码 注意：这里还是提醒一下刚用uni-app的小伙伴，这里的id是“canvas-id=‘’” <canvas class="canvas" canvas-id="myCanvas"></canvas&...
HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例
09-27
在本文中，我们将深入探讨如何使用HTML5的Canvas API来实现一个动态的圆形进度条，并在其中显示数字百分比。Canvas是HTML5的一个重要特性，它提供了一个基于矢量图形的可编程绘图区域，允许开发者通过JavaScript代码...
js canvas实现适用于移动端的百分比仪表盘dashboard
12-11
但是随着越来越多的项目，决定用canvas绘制一个简易的仪表盘，便于以后项目中直接使用； 现版本只是书写为方法形式，也许之后会有时间对其优化为插件形式。 简简单单而已，以下直接给出代码和执行过程中的三张截图...
1_运用canvas把图像显示在固定位置_
09-30
通过调用Canvas API提供的方法，如`drawImage()`，可以将图片加载并绘制到Canvas上。 在描述中提到的".c"文件（canvas_dip.c）很可能是项目的源代码，其中包含了实现图像在Canvas上定位的核心逻辑。这个C文件可能...
Canvas百分比圆形进度条特效
06-24
为了绘制进度条，我们需要两个圆弧，一个是完整的圆（代表100%），另一个是根据当前进度百分比计算出的部分圆。 例如，如果进度是50%，我们可以这样绘制： ```javascript ctx.beginPath(); ctx.arc(centerX, ...
使用canvas、echarts、svg等多用方式绘制一个圆环占比情况
追梦&天空的博客
12-22 891
圆环HTML结构配置。
小程序开发：微信小程序中如何实现环形进度条或环形百分比图
qq_28049067的博客
08-03 2650
小程序中通过canvas实现环形进度条，环形百分比图的方法与实际运用
canvas画圆百分比显示
bansha1495的博客
11-21 156
代码如下，由于canvas还是不太熟悉，还有很多欠缺，希望大家多提意见，谢谢 1 function DrawArc(id,opations){ 2 this.canvas = document.getElementById(id); 3 this.context = this.canvas.getContext('2d'); 4 ...
解决了：微信小程序使用canvas绘制倒计时圆圈和数字居中的实现
weixin_47588909的博客
08-30 1099
微信小程序使用canvas绘制倒计时圆圈和数字居中的实现 1、显示结果 2、过程： （1）wxml + css <!-- 每道题 --> <view style="background-color: #fff;padding:20rpx;margin:10rpx;border-radius:20rpx;"> <!-- 倒计时30秒 --> <view style="display: flex;justi
vue 圆形百分比进度条_HTML5效果：Canvas 实现圆形进度条并显示数字百分比
weixin_39822184的博客
12-19 537
HTML5 Canvas 圆形进度条并显示数字百分比*{margin:0;padding:0;}body{text-align:center;background-color:#000;}window.onload= function(){varcanvas=document.getElementById('canvas'),//获取canvas元素context=canvas.getContex...
用Canvas画百分数圆环
小小码农
04-06 2416
用Canvas画自定义View，画一个带进度条的圆形比例图，包含了数字以及文字、百分号，如图所示：布局只是一个简单的线性布局： <LinearLayout android:id="@+id/ll_report_num_01" android:layout_width="wrap_content"
canvas动画之一 -- 百分比进度加载
SweetoDream
12-08 5968
canvas作为H5中重要的新增特性，使开发者可以用它来创作各种令人惊叹的作品。先来看一下浏览器对canvas的支持情况。<canvas> 标签定义图形，比如图表和其他图像，我们使用脚本来绘制图形。先看一下这次动画的结果： gif图可能不完整，可以点击这里查看完整效果。canvas的API较多，这里我们只介绍一下本次使用到的一下API，更多的canvas可以查看这里。beginPath()
uchart pie 饼图 显示series中配置的数据(series.data)而不是百分比
qq_43345846的博客
03-11 4026
一般的uchart饼图是长下面这样的： 而需求却是要饼图长成下面这个样子： 也就是不展示百分比，展示series.data里面的数据咯。话不多说，开整。 简简单单的一步，就到位了。 showPie(canvasId, chartData, _self) { //核心就下面的for循环，为每个series加上format for(let key in chartData.series) { chartData.series[key].format = (val) =>
如何使用canvas绘制圆形
kobe_back的博客
06-03 5852
Canvas是HTML5中新增的元素，专门用来绘制图形，相当于在页面中放了一张“画布”，可以在里面绘制图形，但是不是指用鼠标画图，而是需要用Javascript编写需要绘制的图形的脚本。 我们利用canvas可以绘制出下图： 在绘制上图之前，我们先来看下相关知识点： 一、 开始创建路径 使用beginPath方法开始创建路径。beginPath() 方法表示开始一条路径，或重置当前的路径。简单来说，其实就是告诉画布，我要开始画草稿了，请把之前的草稿都清除掉。 这个方法不设置参数，通过调用这个方
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
最新发布
OpenTiny的博客
07-17 1160
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
python如何使用canvas画圆
07-12
您可以使用Python的Tkinter库中的Canvas对象来绘制圆。 首先，您需要导入Tkinter库： ```python from tkinter import * ``` 然后，创建一个Tkinter窗口并实例化Canvas对象： ```python window = Tk() canvas = ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值