canvas 绘制圆形进度条

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>canvas 圆形进度条效果</title><style>*{margin:0;padding:0;}body{text-align:center;background-color:#000;}</style>
</head>
<body><canvas id="canvas" width="500" height="500" style="background:#000;"></canvas><script>window.onload = function(){var canvas = document.getElementById('canvas'),  //获取canvas元素context = canvas.getContext('2d'),  //获取画图环境，指明为2dcenterX = canvas.width/2,   //Canvas中心点x轴坐标centerY = canvas.height/2,  //Canvas中心点y轴坐标rad = Math.PI*2/100, //将360度分成100份，那么每一份就是rad度speed = 0.1; //加载的快慢就靠它了 //绘制蓝色外圈function blueCircle(n){context.save();context.strokeStyle = "#fff"; //设置描边样式context.lineWidth = 5; //设置线宽context.beginPath(); //路径开始context.arc(centerX, centerY, 100 , -Math.PI/2, -Math.PI/2 +n*rad, false); //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)context.stroke(); //绘制context.closePath(); //路径结束context.restore();}//绘制白色外圈function whiteCircle(){context.save();context.beginPath();context.strokeStyle = "white";context.arc(centerX, centerY, 100 , 0, Math.PI*2, false);context.stroke();context.closePath();context.restore();}  //百分比文字绘制function text(n){context.save(); //save和restore可以保证样式属性只运用于该段canvas元素context.strokeStyle = "#fff"; //设置描边样式context.font = "40px Arial"; //设置字体大小和字体//绘制字体，并且指定位置context.strokeText(n.toFixed(0)+"%", centerX-25, centerY+10);context.stroke(); //执行绘制context.restore();} //动画循环(function drawFrame(){window.requestAnimationFrame(drawFrame, canvas);context.clearRect(0, 0, canvas.width, canvas.height);whiteCircle();text(speed);blueCircle(speed);if(speed > 100) speed = 0;speed += 0.1;}());}</script></body>
</html>

　　有详细解释练习demo

转载于:https://www.cnblogs.com/ysshuai/p/7094356.html

canvas 绘制圆形进度条相关推荐

android绘制环形进度_Android使用Canvas绘制圆形进度条效果
前言 Android自定义控件经常会用到Canvas绘制2D图形,在优化自己自定义控件技能之前,必须熟练掌握Canvas绘图机制.本文从以下三个方面对Canvas绘图机制进行讲解: 画布Canvas ...
使用canvas绘制圆形进度条
实现步骤: 绘制一个圆: 绘制圆环: 绘制进度环: 绘制文字: 一.创建画布 <canvas id='myCanvas' width='200' height='200'></can ...
使用h5 canvas绘制圆形进度条
创建一个Html容器canvas: <canvas id="myCanvasTag" width="300" height="300" ...
H5 Canvas绘制圆形进度条动画效果
效果如图效果比较简单 html结构部分 <canvas id="canvas" width="110" height="110"&g ...
精通Android自定义View(十二)绘制圆形进度条
1 绘图基础简析 1 精通Android自定义View(一)View的绘制流程简述 2 精通Android自定义View(二)View绘制三部曲 3 精通Android自定义View(三)View绘制 ...
Android 绘制圆形进度条
Android 绘制圆形进度条最近项目上有一些需求,需要绘制圆形的进度条满足设计上和交互上的需求: 实现思路在画布上直接绘制View,需要了解一下几点 1.需要画一个圆 2.圆圈上有不同进度的颜色 ...
使用canvas绘制圆环进度条
使用canvas绘制圆环进度条技术要求需要一点点数学基础需要对 canvas 的常见的方法熟悉一点点数学基础已知圆心,半径,角度,求圆上的点坐标 canvas 常见的方法菜鸟教程扬帆起航 ...
html数字显示百分比,扣丁学堂html5 教程之Canvas实现圆形进度条并显示数字百分比效果...
今天扣丁学堂html5培训小编和大家分享一下Canvas实现圆形进度条并显示数字百分比效果示例,对html5感兴趣的小伙伴或者是参加学习的小伙伴可以了解一下. Canvas实现圆形进度条并显示数字百分 ...
html5 canvas绘制圆形进度实例
2019独角兽企业重金招聘Python工程师标准>>> html5 canvas绘制圆形进度实例 <canvas id="test" width=200 h ...

canvas 绘制圆形进度条

canvas 绘制圆形进度条相关推荐

最新文章

热门文章