本文介绍如何使用 JavaScript Canvas 技术复刻苹果 iOS 12 发布会上展示的环形进度条效果。通过定义画笔样式、绘制背景圆与前景弧线，并结合异步循环控制帧率，仅用约 100 行代码即可实现带有荧光阴影的动态进度展示，适合前端开发者参考学习。
前言
Canvas 技术为前端开发提供了强大的图形处理能力，随着 HTML5 的普及，它拓展了 Web 应用的功能边界。利用 Canvas 实现的各类炫酷视觉效果及 2D、3D 游戏，显著提升了浏览器的承载能力。由于其优异的性能表现，Canvas 成为开发游戏的理想选择，许多开发者也乐于借此创作小型游戏。
在线地址
近期回顾到一个此前制作的小案例，觉得颇具趣味，特此分享。该效果源自苹果 iOS 12 发布会中库克演示 PPT 里展示的带荧光效果的环形进度条。此前有外包项目客户指定需要此效果，因技术难点求助于我，从而促成了此次复刻实现。
基础 Dom 结构
首先编写基础的标签元素，后续将基于此生成画布上下文对象。Canvas 标签内部的内容仅在浏览器不支持 Canvas 时显示，否则会被自动忽略。
<div class="container">
<canvas id="canvas" width="600" height="600">
<p>抱歉，您的浏览器不支持canvas</p>
</canvas>
</div>基本变量
let canvas = document.getElementById("canvas")
let ctx = canvas.getContext("2d") // 上下文对象
let circleX = canvas.width / 2 // 中心x坐标
let circleY = canvas.height / 2 // 中心y坐标
let radius = 100 // 圆环半径
let percent = 90 // 最终百分比
let lineWidth = 1 // 圆形线条的宽度
let fontSize = 42 // 字体大小
画圆
首先绘制一个基础圆，主要设置画笔颜色、位置、样式、阴影及模糊值等，该部分作为背景层使用。
// 画圆
function circle(cx, cy, r) {
ctx.beginPath()
// ctx.moveTo(cx, cy-r-10)
ctx.lineWidth = lineWidth
ctx.strokeStyle = "#666"
ctx.lineCap = "round"
ctx.shadowColor = "#000" //设置阴影颜色
ctx.shadowBlur = 0 //设置模糊值
ctx.shadowOffsetX = 0
ctx.shadowOffsetY = 0
ctx.arc(cx, cy, r + 10, 0, (Math.PI / 180) * 360)
ctx.moveTo(cx + r, cy)
// ctx.moveTo(cx, cy-r)
ctx.arc(cx, cy, r, 0, (Math.PI / 180) * 360)
ctx.stroke()
}画弧线
在背景层之上，通过绘制弧线来呈现主要视觉效果。
// 画弧线
function sector(cx, cy, r, startAngle, endAngle, anti) {
ctx.beginPath()
ctx.moveTo(cx, cy - r - 5) // 从圆形底部开始画
ctx.lineWidth = 12
ctx.strokeStyle = "#ffccff"
// ctx.fillStyle = '#ffccff'
// 圆弧两端的样式
ctx.lineCap = "round"
ctx.shadowColor = "#ff6699" //设置阴影颜色
ctx.shadowOffsetX = 0
ctx.shadowOffsetY = 0
ctx.shadowBlur = 4 //设置模糊值
// 圆弧
ctx.arc(
cx,
cy,
r + 5,
startAngle * (Math.PI / 180.0) - Math.PI / 2,
endAngle * (Math.PI / 180.0) - Math.PI / 2,
anti
);
ctx.moveTo(cx, cy - r) // 从圆形底部开始画
ctx.moveTo(cx, cy - r) // 从圆形底部开始画
ctx.stroke()
}让画面动起来
通过定时执行刷新动作，实现进度条数据更新与画布重绘。可以使用 while 循环配合 async/await 及 setTimeout 异步机制来控制帧率。
// 刷新
function loading(n) {
// 清除canvas内容
ctx.clearRect(0, 0, circleX * 2, circleY * 2)
// 中间的字
ctx.font = fontSize + "px April"
ctx.textAlign = "center"
ctx.textBaseline = "middle"
ctx.fillStyle = "#ffccff"
ctx.fillText(parseFloat(n).toFixed(0) + "%", circleX, circleY)
// 圆形
circle(circleX, circleY, radius)
// 圆弧
sector(circleX, circleY, radius, 0, (n / 100) * 360)
sector2(circleX, circleY, radius, 0, (n / 100) * 360)
// 遮盖
cover(circleX, circleY, radius)
}
// 更新进度
function changeProcess(val, times) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
loading(val)
resolve()
}, times)
})
}
// 循环
async function loop(val) {
while (true) {
for (let i = 0; i < val; i++) {
await changeProcess(i + 1, 1000);
}
return
}
}
loop(percent)
总结
利用 Canvas 提供的 arc API 结合样式配置，仅用约 100 行代码便实现了苹果发布会上的这一效果，颇具趣味性。
到此这篇关于 JavaScript canvas 复刻苹果发布会环形进度条的文章就介绍到这了，更多相关 JavaScript canvas 进度条内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！