canvas绘制圆环进度条

最新推荐文章于 2023-10-28 20:39:32 发布
VIP文章 最新推荐文章于 2023-10-28 20:39:32 发布
阅读量3.1k 收藏 1
点赞数
分类专栏： HTML5 Javascript jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Doulvme/article/details/56279616
版权
圆环进度表示是现在常用的一种进度标识方法，在此特意记录一下以便后续修改使用，此例仅供参考！ 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>绘制圆环进度条</title>
	</head>
	<body>
		<div>
			<canvas id="myCanvas"></canvas>
		</div>
		<script type="text/javascript">
			function drawRing(w,h,val){
				//先创建一个canvas画布对象，设置宽高
				var c=document.getElementById('myCanvas');
				var ctx=c.getContext('2d');
				ctx.canvas.width=w;
				ctx.canvas.height=h;
				//圆环有两部分组成，底部灰色完整的环，根据百分比变化的环
				//先绘制底部完整的环
				//起始一条路径
				ctx.beginPath();
				//设置当前线条的宽度
				ctx.lineWidth=10;//10px
				//设置笔触的颜色
				ctx.strokeStyle='#CCCCCC';
				//arc()方法创建弧/曲线（用于创建圆或部分圆）arc(圆心x,圆心y,半径,开始角度,结束角度)
				ctx.arc(50,50,40,0,2*Math.PI);			
				//绘制已定义的路径
				ctx.stroke();
				
				//绘制根据百分比变动的环
				ctx.b
最低0.47元/天 解锁文章
soosgo
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
canvas实现环形进度条效果
08-31
本文主要介绍了canvas实现环形进度条效果的实例。具有很好的参考价值。下面跟着小编一起来看下吧
【Canvas绘制圆环进度条】
ScoloveCode的博客
08-17 491
Canvas绘制圆环进度条,无需调整无需理解,直接CV !!!
使用canvas绘制圆环进度条
明皈依的博客
12-30 2757
使用canvas绘制圆环进度条 技术要求 需要一点点数学基础 需要对 canvas 的常见的方法熟悉 一点点数学基础 已知圆心，半径，角度，求圆上的点坐标 canvas 常见的方法 菜鸟教程 扬帆起航 首先创建一个canvas ，并将这个dom添加在html中 方法名称：createCanvas // 需要申明两个全局变量 let isIconLoadSuccess = false; let iconLoading = null; // 以下是一个方法 const canvas = docum
[uni-app] canvas绘制圆环进度条
iOSTianNan的博客
10-17 1220
这里要明确的是, 画布是画布(即context), 绘制好的图像是绘制好的图像)绘制出的10等分小线段已经完成, 想要做到如下图效果. 我们只要在for循环内, 选出i=0,6,8即可。当i越大,小线段的起始点与结束点的距离也越大, 所以i=0的时候, 小线段最短,梳理一下流程, 如果要画一个圆环, 且要保证起始点是0点方向, 步骤是。那么我们就发现, 他是从原始画布的90°方向开始绘制的,(小线段因为是基于moveTo/lineTo,绘制的)通过控制不同下标的小线段的绘制, 得到如下的分析图,
canvas环形进度条
风如白话的博客
04-29 418
利用canvas绘制环形进度条 组件对canvas绘制模糊问题进行了处理。 根据dpr，扩大canvas画布的像素，使1个canvas像素和1个物理像素相 由于画布扩大，canvas的坐标系也跟着扩大，如果按照原先的坐标系绘图内容会缩小 所以需要将绘制比例放大 使用 progressRing({ el: document.getElementById("canvas"), //绘制对象 width: 130, height: 130, lineWidth: 6, lineCap: 'rou
Canvas绘制环形进度条
越陌度阡
06-16 857
给大家分享一个用Canvas写的环形进度条，实现从0%加载到75%的动画，静态效果图如下： 实现动画的代码如下： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Canvas绘制环形进度条</title> ......
canvas实现简易的圆环进度条效果
08-31
本文主要分享了canvas实现简易的圆环进度条效果的实例，具有很好的参考价值，下面跟着小编一起来看下吧
html5 canvas进度条圆环图表统计动画特效
06-11
html5 canvas制作的进度条圆环图表统计动画特效，一款非常简单的半圆环百分比进度条动画效果。
canvas实现弧形可拖动进度条效果
08-30
本篇文章主要介绍了canvas实现弧形可拖动进度条的实例方法，具有很好的参考价值。下面跟着小编一起来看下吧
利用 Canvas实现绘画一个未闭合的带进度条的圆环
12-13
定义半径，定义圆环厚度，定义圆心位置、定义默认填充颜色 let radius = 75 let thickness= 10 let innerRadius = radius - thickness let x = 75 let y = 75 var canvas = document.getElementById('tutorial'); ...
Vue环形进度条
一个前端工作者的博客
08-12 3072
环形进度条可设置背景颜色，遮罩层，文字，百分值默认保存两位小数 sizeOut:底圈半径 Number 默认值：100 sizeIn里圈半径 Number 默认值：80 size进度条大小 Number 默认值：10 注意：需要满足sizeOut>sizeIn+size colorBg背景色 String 默认值：#fff 支持rgb\rgba\十六进制（3位或者6位）\hsl\hsla colorTop进度条颜色 String 默认值：#0f0 支持rgb\rgba\十六进.
vue造轮子之圆形进度条
Only_ruiwen的博客
01-07 2823
在github上看到一个圆形进度条组件，比较适合于我现在的业务需求，然后就拷贝下来放进我的项目。但是cv程序员并不是我想要。所以就研究了一下它的源码，没想到的是源码竟然是如此简单和通俗易懂，先附上原作者的github地址和效果图。 https://github.com/cumt-robin/vue-awesome-progress 一.canvas基本用法 由于该组件是基于canvas完成的，所...
vue： 简单的canvas实现圆环进度条
weixin_44076167的博客
03-16 1654
效果如下： 代码如下： <template> <div> <!-- 圆环背景 --> <canvas id="canvas" style="width: 100%;height: 100%"> </canvas> </div> </template> <script> export default { // 电量环
vue制作圆形进度条
weixin_40445256的博客
02-19 2682
vue制作圆形进度条效果图代码html结构 效果图 代码 html结构 <div ref="cir" class="circle"> <svg viewBox="0 0 1040 1040"> <path style="fill:none;stroke:#d4d4d4;stroke-width:40px" d="M 520 520 m 0 -500 a 500 500 0 1 1 0 1000 a 500 500 0 1 1 0 -1000">&lt
基于Vue，实现圆形进度条
xiao_yu_liu的博客
05-17 1917
基于Vue，实现圆形进度条
canvas实现半圆进度条图形
Christina0109的博客
11-03 748
将半圆进度条封装成了一个组件，可直接食用，项目采用的是vue3框架,可根据文章内容逻辑改成vue2框架代码。改造成本较低
vue 环形进度条
明耀的博客
10-09 1224
cnpm install vue-circleprogressbar <div style="height: 160px;" > <circle-progressbar style="overflow-y:hidden;" barColor="#00ffff" backgroundColor="rgba(0,0,0,0.8)" :width="60" :radius="25" :progress="70" :isAnimation="true"></circle-
vue圆环进度条
oneyJiang
06-12 7145
此组件是从iview能陪你过过来修改的，不需要安装依赖，可直接用，自己用的时候最好也封装成组件，不然需要多个圆环的时候实现特别不容易。上组件&lt;template&gt; &lt;div class="circle_container"&gt; &lt;div :style="circleSize" :class="wrapClasses"&gt; ..
vue自定义环形进度条
最新发布
Seveny07的博客
10-28 870
vue自定义环形进度条
uniapp canvas绘制弧形圆环
07-28
你可以使用uniapp的canvas API来绘制弧形圆环。以下是一个示例代码： ```html <template> <view> <canvas canvas-id="myCanvas" style="width: 300px; height: 300px;"></canvas> </view> </template> <script> export default { onReady() { // 获取canvas上下文 const ctx = uni.createCanvasContext('myCanvas', this); // 设置圆环的属性 const x = 150; // 圆心的x坐标 const y = 150; // 圆心的y坐标 const radius = 100; // 圆环的半径 const startAngle = 0; // 起始角度，单位为弧度 const endAngle = Math.PI * 2; // 结束角度，单位为弧度 const lineWidth = 10; // 圆环的线宽 const strokeStyle = '#f00'; // 圆环的颜色 // 绘制圆环 ctx.beginPath(); ctx.arc(x, y, radius, startAngle, endAngle); ctx.setLineWidth(lineWidth); ctx.setStrokeStyle(strokeStyle); ctx.stroke(); ctx.closePath(); // 绘制完成并显示在canvas上 ctx.draw(); } } </script> ``` 在上述代码中，我们首先通过`uni.createCanvasContext`获取到canvas的上下文对象。然后，我们设置了圆环的属性，包括圆心的坐标、半径、起始角度、结束角度、线宽和颜色。接下来，我们使用`ctx.beginPath()`开始绘制路径，通过`ctx.arc()`绘制弧形路径，再通过`ctx.setLineWidth()`设置线宽，`ctx.setStrokeStyle()`设置颜色，最后使用`ctx.stroke()`绘制圆环。最后，我们使用`ctx.draw()`将绘制的内容显示在canvas上。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值