Canvas画环形圆

最新推荐文章于 2022-05-12 11:22:57 发布
最新推荐文章于 2022-05-12 11:22:57 发布
阅读量5k 收藏 7
点赞数 2
分类专栏： canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hyupeng1006/article/details/91872285
版权

 效果图1：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Canvas progress</title>
</head>
<body>
	<canvas id="process" width="200" height="200"></canvas>
	<script>
		(function (){
			var c = document.getElementById('process'),
				process = 0,
				ctx = c.getContext('2d');
 
			// 画灰色的圆
			ctx.beginPath();
			ctx.arc(100, 100, 80, 0, Math.PI*2);
			// ctx.closePath();
			ctx.strokeStyle  = 'green';
			ctx.stroke();

			// 画红色的圆
			ctx.beginPath();
			ctx.arc(100, 100, 70, 0, Math.PI*2);
			// ctx.closePath();
			ctx.fillStyle  = 'red';
			ctx.fill();
 
			function animate(){
				requestAnimationFrame(function (){
					process = process + 1;
					drawCricle(ctx, process);
					if (process < 90) {
						animate();
					}
				});
			}
 
			function drawCricle(ctx, percent){
				// 画进度环
				ctx.beginPath();
				ctx.moveTo(100, 100);  
				ctx.arc(100, 100, 80, Math.PI * 1.5, Math.PI * (1.5 + 2 * percent / 100 ));
				ctx.closePath();
				ctx.fillStyle = 'yellow';
				ctx.fill();
 
				// 画内填充圆
				ctx.beginPath();
				ctx.arc(100, 100, 60, 0, Math.PI * 2);
				ctx.closePath();
				ctx.fillStyle = '#fff';
				ctx.fill();
 
				// 填充文字
				ctx.font = "bold 20pt Microsoft YaHei"; 
				ctx.fillStyle = '#333';
				ctx.textAlign = 'center';  
				ctx.textBaseline = 'middle';  
				ctx.moveTo(100, 100);  
				ctx.fillText(process + '%', 100, 100);
			}
 
			animate();
		}());
	</script>
</body>
</html>

 

 

效果图2：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Canvas progress</title>
</head>
<body>
	<canvas id="process" width="300" height="300"></canvas>
	<script>
		(function (){
			var c = document.getElementById('process'),
				process = 0,
				ctx = c.getContext('2d');

			function animate(){
				requestAnimationFrame(function (){
					process = process + 1;
					drawCricle(ctx, process);
					if (process < 75) {
						animate();
					}
				});
			}

			function drawCricle(ctx, percent){
				// 画进度环
				ctx.beginPath();
				ctx.moveTo(100, 100);
				ctx.arc(100, 100, 80, Math.PI * 1.5, Math.PI * (1.5 + 2 * percent / 100 ));
				ctx.closePath();
				ctx.fillStyle = '#108EE9';
				ctx.fill();

				// 画第一层灰色的圆
			ctx.beginPath();
			ctx.arc(100, 100, 70, 0, Math.PI*2);
			// ctx.closePath();
			ctx.fillStyle  = '#ededed';
			ctx.fill();
			// 画第二层白色的圆
			ctx.beginPath();
			ctx.arc(100, 100, 65, 0, Math.PI*2);
			// ctx.closePath();
			ctx.fillStyle  = '#fcfcfc';
			ctx.fill();

				// 画内填充圆
				ctx.beginPath();
				ctx.arc(100, 100, 55, 0, Math.PI * 2);
				ctx.closePath();
				ctx.fillStyle = '#FAFCFC';
				ctx.fill();

			// 画灰色的框
			ctx.beginPath();
			ctx.arc(100, 100, 55, 0, Math.PI*2);
			// ctx.closePath();
			ctx.strokeStyle  = '#f2f2f2';
			ctx.stroke();

				// 填充文字
				ctx.font = "bold 20pt Microsoft YaHei";
				ctx.fillStyle = '#DA4816';
				ctx.textAlign = 'center';
				ctx.textBaseline = 'middle';
				ctx.moveTo(100, 100);
				ctx.fillText(process + '%', 100, 80);

				ctx.fillStyle = '#aaa';
				ctx.font="10px Georgia";
				ctx.fillText("销售目标完成度",100,100);

				// ctx.font="10px Georgia";
				ctx.fillText("集团内排名",100,120);

				ctx.fillStyle = '#DA4816';
				ctx.font="10px Georgia";
				ctx.fillText("1",100,140);
			}

			animate();
		}());
	</script>
</body>
</html>

 

 

hyupeng1006
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
环形图在html里面制作,如何用canvas画图表（1）扇形图和环形图
weixin_35813209的博客
06-15 822
如何用canvas画图表(1)扇形图和环形图现在canvas图表的库越来越多，也越来越成熟，以致于大家想到图表制作都直接想着用第三方库，而忽略了自己动手制作的可能性。其实要绘制一个简单基本的canvas图表库并不难。下面就让我展开介绍。第一期，我先挑了最基础的扇形和环形图表进行讲解。若要看懂此文，先要阅读一下MDN的canvas文档。https://developer.mozilla.org/zh...
canvas-绘制圆形
nicecode
07-27 5222
角度与弧度的js表达式:radians(弧度)=(deg*Math.PI/180)。 canvas绘制圆形 arc(x, y, radius, startAngle, endAngle, anticlockwise) ​ 画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束， ​ 按照anticlockwise给定的方向（默认为顺时针）来生成。 ​ ture：逆时针 ​ false: 顺时针 ​ x,y为绘制圆弧所在圆上的圆心坐标
自定义view之用Canvas画带动画的环形增长数字
04-21
这是一个自定义view的项目源码，布局就是一个简单的线性布局而已，通过addview的方式，将自定义view显示出来； 用Canvas画一个渐变圆以及外圈圆、外圈小圆，包括外圈圆的增长动画，数字增长动画。
canvas绘制圆环动画
wolfking__的博客
03-29 672
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&lt
使用canvas绘制圆环进度条
明皈依的博客
12-30 2847
使用canvas绘制圆环进度条 技术要求 需要一点点数学基础 需要对 canvas 的常见的方法熟悉 一点点数学基础 已知圆心，半径，角度，求圆上的点坐标 canvas 常见的方法 菜鸟教程 扬帆起航 首先创建一个canvas ，并将这个dom添加在html中 方法名称：createCanvas // 需要申明两个全局变量 let isIconLoadSuccess = false; let iconLoading = null; // 以下是一个方法 const canvas = docum
HTML5canvas 绘制一个圆环形的进度表示实例
12-29
HTML5 canvas 绘制圆环形进度 先看一下画出来的效果,如下图,这样一个圆环形的进度.  我这里使用HTML5的Canvas来要制作这样一个圆环形的进度, 首先是HTML页面,HTML5的文档标识是: <!DOCTYPE html>  这个文档标识要比HTML4的简单多了.  第二步,在页面上创建一个Canvas画布元素: <canvas class=process width=48px height=48px>61%</canvas>  我这里创建了一个长宽都是48像素的画布,因为我要画的圆外直径是48个像素的,在canvas元素中间写的是”61%”,这个文字可不
canvas画环形进度条
08-28
<title>Canvas环形进度条 canvas { border: 1px solid #ccc; } <canvas id="progressCanvas" width="200" height="200"></canvas> <script src="CanvasTest.js"></script> ``` 接下来，我们将在`...
canvas实现环形进度条效果
08-31
Canvas 实现环形进度条效果 本文主要介绍了使用 Canvas 实现环形进度条效果的实例，具有很好的参考价值。下面，我们来详细介绍这个实例。 知识点 1：Canvas 基础 Canvas 是 HTML5 中的一个重要元素，用于创建图形...
canvas画未闭合的环形进度条
03-30
canvas进度条不支持ie8，可以根据需求自己调整角度。如果出现模糊的情况，可以放大一倍，在用transform缩小0.5倍，进行相应的优化
canvas绘制环形进度条
01-19
效果如下： 代码如下： <!...<... ...meta name=viewport content=maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0/>...meta name=format-detection content=...canvas绘
canvas实现圆环加载效果
读心悦
06-01 1617
整个效果分为三个部分：中间的百分比、环形进度条、细线圆环。 获取上下文环境： var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var conterX = canvas.width / 2; ...
Android Canvas练习(8)自已绘环形图(Dount Chart)
拙言的专栏
04-12 9468
继续常规图的绘制研究，在这绘制了个环形图(Dount Chart),很简单，大圆套小圆就出来了。呵呵，照例先上猛照:                  怎么样，效果还可以吧，实现代码很少，附上:          package com.xcl.chart; /** * Canvas练习 * 自已画环形图(Dount Chart) * * author:xiong
canvas绘制进度圆环
weixin_43232021的博客
05-15 166
canvas绘制进度圆环 1.封装方法 function CanvasCov(id,progress){ var canvas = document.querySelector(id); var x = canvas.width/2; var y= canvas.height/2; var per = progress/100; //百分比 var...
【android】绘制圆环的三种方式
热门推荐
u011494050的专栏
09-13 3万+
在android中要绘制圆环，暂时知道有三种方式。分别是： 一、设置画笔的style为stoke，绘制圆 这里是先绘制内圆，然后绘制圆环（圆环的宽度就是paint设置的paint.setStrokeWidth的宽度），最后绘制外圆。 请看核心源码： [java] view plaincopyprint? "http://
canvas画一个简单的红色矩形
mcbeath的专栏
08-13 5672
来自我的网站：canvas画一个简单的红色矩形
html5 圆形过渡到方形,HTML5/Canvas使用方形构建的3D圆环
weixin_42336892的博客
06-20 364
JavaScript语言：JaveScriptBabelCoffeeScript确定var canvas = document.getElementsByTagName('canvas')[0];var ctx = canvas.getContext('2d');canvas.width = canvas.height = 400;aaa();function aaa() {var a, b, c...
ReactHooks+TS项目echarts3D立体环形图
m0_37964179的博客
05-12 2260
echarts3D立体环形图 效果图如下 components 中的echarts/index.tsx import * as React from 'react'; import classnames from 'classnames'; import * as echarts from 'echarts'; import 'echarts-gl'; import _ from 'lodash'; import { useSize, useUnmount } from 'ahooks'; i
canvas环状加载图案
starvingzk的博客
10-11 195
&lt;script&gt; function loading(t) { var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.clearRect(0,0,c.width,c.height); cxt.lineWidth='8'...
tkinter canvas画实心圆
最新发布
04-16
好的，我可以回答这个问题。要画实心圆，可以使用Tkinter中的canvas.create_oval()函数，并设置fill参数为想要的颜色。具体代码示例如下： ```python import tkinter as tk root = tk.Tk() canvas = tk.Canvas(root, width=200, height=200) canvas.pack() # 画实心圆，fill参数设置为想要的颜色 canvas.create_oval(50, 50, 150, 150, fill='red') root.mainloop() ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值