HTML5画布实现循环进度条和显示数百分比效果的例子

本文介绍了HTML5画布实现循环进度条和显示数字百分比效果的例子，具体如下：

实现效果
1。首先创建HTML代码
2。创建画布环境
VaR的画布document.getelementbyid（'canvas / /），把画布元素
背景canvas.getcontext（二维的）， / /被指定为2D绘图环境，
集中式交换=画布宽度 / 2 / /帆布中心点的x轴坐标
世纪=帆布。身高 / 2 / /帆布中心点的Y轴坐标
2＝360度将分为100个部分，然后每一个都是RAD（100）。
速度= 0.1；加载速度取决于它。
三.绘制一个5像素宽的移动外圈
5像素宽外圈的拉伸运动
功能bluecircle（N）{
context.save（）；
context.strokestyle =# FFF ； / /设置描边风格
context.linewidth = 5； / /设置线宽
（上下文。调用）； / /路径
context.arc（集中式交换，世纪，数学。π/ 2，数学。PI / 2 100 + N×rad，false）； / / context.arc（X弧坐标，Y坐标、半径、起始角、端角，顺时针或逆时针）
（上下文.笔划）；
（上下文。closepath）； / /最后的路径
context.restore（）；
}

4。画一个白色的外圈
绘制白色环
功能whitecircle（）{
context.save（）；
Context.beginPath（）；
context.linewidth = 2； / /设置线宽
context.strokestyle =红色；
context.arc（集中式交换，世纪，100, 0，数学，PI * 2，假）；
context.stroke（）；
Context.closePath（）；
context.restore（）；
}

5。比例绘制文本
函数文本（n）{
context.save（）； / /保存和恢复可以保证样式属性只用于段canvas元素
context.strokestyle =# FFF ； / /设置描边风格
context.font =40px宋体； / /设置字体大小和字体
绘图/字体，并指定位置
context.stroketext（n.tofixed（0）+%
（上下文.笔划）； /实现绘图
context.restore（）；
}
6。让它移动
动画周期
（功能拉伸机（）{
window.requestanimationframe（拉伸机）；
context.clearrect（0, 0，canvas.width，帆布，高度）；
WhiteCircle（）；
文本（速度）；
bluecircle（速度）；
如果（速度> 100）速度= 0；
速度= 0.1；
}（）；

完整的代码

HTML5画布循环进度条和显示数百分比
*边距：0；填充：0；}
体{文本对齐：中心；背景颜色：# 000；}

在window.onload =函数（）{
VaR的画布document.getelementbyid（'canvas / /），把画布元素
背景canvas.getcontext（二维的）， / /被指定为2D绘图环境，
集中式交换=画布宽度 / 2 / /帆布中心点的x轴坐标
世纪=帆布。身高 / 2 / /帆布中心点的Y轴坐标
2＝360度将分为100个部分，然后每一个都是RAD（100）。
速度= 0.1；加载速度取决于它。

5像素宽外圈的拉伸运动
功能bluecircle（N）{
context.save（）；
context.strokestyle =# FFF ； / /设置描边风格
context.linewidth = 5； / /设置线宽
（上下文。调用）； / /路径
context.arc（集中式交换，世纪，数学。π/ 2，数学。PI / 2 100 + N×rad，false）； / / context.arc（X弧坐标，Y坐标、半径、起始角、端角，顺时针或逆时针）
（上下文.笔划）；
（上下文。closepath）； / /最后的路径
context.restore（）；
}
绘制白色环
功能whitecircle（）{
context.save（）；
Context.beginPath（）；
context.linewidth = 2； / /设置线宽
context.strokestyle =红色；
context.arc（集中式交换，世纪，100, 0，数学，PI * 2，假）；
context.stroke（）；
Context.closePath（）；
context.restore（）；
}
文本呈现
函数文本（n）{
context.save（）； / /保存和恢复可以保证样式属性只用于段canvas元素
context.strokestyle =# FFF ； / /设置描边风格
context.font =40px宋体； / /设置字体大小和字体
绘图/字体，并指定位置
context.stroketext（n.tofixed（0）+%
（上下文.笔划）； /实现绘图
context.restore（）；
}
动画周期
（功能拉伸机（）{
window.requestanimationframe（拉伸机）；
context.clearrect（0, 0，canvas.width，帆布，高度）；
WhiteCircle（）；
文本（速度）；
bluecircle（速度）；
如果（速度> 100）速度= 0；
速度= 0.1；
}（）；
}
以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。