Canvas绘制动态进度条圆环

quietin 发布于2019-08-30 15:44 / 1374人阅读

摘要：最终效果一定义初始变量外环半径圆环厚度内环半径开始角度结束角度圆心坐标圆心坐标将绘图原点移到画布中央将画布旋转度初始填充颜色二工具方法计算圆环上点的坐标弧度转角度角度转弧度三渲染方法渲染函数绘制外环计算外环与内环第一个连接处的中心坐标绘

最终效果

一、定义初始变量

let radius = 140 //外环半径
let thickness = 20 //圆环厚度
let innerRadius = radius - thickness //内环半径
let startAngle = -90 //开始角度
let endAngle = 180 //结束角度
let x = 0 //圆心x坐标
let y = 0 //圆心y坐标
let canvas = document.getElementById("tutorial");
canvas.width = 300;
canvas.height = 300;

let ctx = canvas.getContext("2d");
ctx.translate(canvas.width / 2, canvas.height / 2);//将绘图原点移到画布中央
ctx.rotate(angle2Radian(225)) //将画布旋转225度
ctx.fillStyle = "#f2d7d7"; //初始填充颜色

二、工具方法

 //计算圆环上点的坐标
function calcRingPoint(x, y, radius, angle) {
    let res = {}
    res.x = x + radius * Math.cos(angle * Math.PI / 180)
    res.y = y + radius * Math.sin(angle * Math.PI / 180)
    return res
}

//弧度转角度
function radian2Angle(radian) {
    return 180 * radian / Math.PI
}

//角度转弧度
function angle2Radian(angle) {
    return angle * Math.PI / 180
}

三、渲染方法

//渲染函数
function renderRing(startAngle, endAngle) {
     ctx.beginPath();

    //绘制外环
    ctx.arc(x, y, radius, angle2Radian(startAngle), angle2Radian(endAngle))

    //计算外环与内环第一个连接处的中心坐标
    let oneCtrlPoint = calcRingPoint(x, y, innerRadius + thickness / 2, endAngle)

    //绘制外环与内环第一个连接处的圆环
    ctx.arc(oneCtrlPoint.x, oneCtrlPoint.y, thickness / 2, angle2Radian(-90), angle2Radian(270))

    //绘制内环
    ctx.arc(x, y, innerRadius, angle2Radian(endAngle), angle2Radian(startAngle), true)

    //计算外环与内环第二个连接处的中心坐标
    let twoCtrlPoint = calcRingPoint(x, y, innerRadius + thickness / 2, startAngle)

    //绘制外环与内环第二个连接处的圆环
    ctx.arc(twoCtrlPoint.x, twoCtrlPoint.y, thickness / 2, angle2Radian(-90), angle2Radian(270))

    ctx.fill()
    // ctx.stroke()
}

具体思路：

为了方便，代码中使用弧度的地方一律由角度转为弧度

1.绘制外环：

这一步最简单，直接按照官方的使用方法使用即可

2.绘制外环与内环连接处的第一个圆环

首先算出，外环结束处与内环开始处中间点的坐标

计算圆环上点的坐标公式为：

x = x + radius  Math.cos(angle  Math.PI / 180)
y = y + radius  Math.sin(angle  Math.PI / 180)

代入以上公式可算出圆环上任意一点的坐标，然后再以此为圆心，圆环厚度/2为半径画圆环

3.绘制内环

这一步只需将半径缩短，并将绘制外环的开始角度与结束角度调换即可

4.绘制内环与外环连接处的第二圆环

和第二步同理，先计算出外环开始处与内环结束处中间点的坐标，然后再以此为圆心，圆环厚度/2为半径画圆环

5.完成填充
到这一步，圆环就完成了

四、动态进度条

 //进度条动画
ctx.fillStyle = "#e87c7c";
let tempAngle = startAngle
let twoEndAngle = 0
let step = (twoEndAngle - startAngle) / 100
let numberSpan = document.querySelector(".number")
let count = 0
let inter = setInterval(() => {
    if (tempAngle > twoEndAngle) {
        clearInterval(inter)
    } else {
        count++
        numberSpan.innerText = count
        tempAngle += step
    }
    renderRing(startAngle, tempAngle)
}, 16.7)

动态计算结束角度，然后设定一个计数器，重复执行渲染方法。

五、完整代码

私有云云服务器圆环进度条动态进度条html js动态数据进度条绘制圆环

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116128.html

Canvas绘制动态进度条圆环

摘要：最终效果一定义初始变量外环半径圆环厚度内环半径开始角度结束角度圆心坐标圆心坐标将绘图原点移到画布中央将画布旋转度初始填充颜色二工具方法计算圆环上点的坐标弧度转角度角度转弧度三渲染方法渲染函数绘制外环计算外环与内环第一个连接处的中心坐标绘最终效果 showImg(https://segmentfault.com/img/bVbvCoX); 一、定义初始变量 let radius = 1...

edagarli 2019-08-26 10:22 评论0 收藏0
Canvas绘制动态进度条圆环

摘要：最终效果一定义初始变量外环半径圆环厚度内环半径开始角度结束角度圆心坐标圆心坐标将绘图原点移到画布中央将画布旋转度初始填充颜色二工具方法计算圆环上点的坐标弧度转角度角度转弧度三渲染方法渲染函数绘制外环计算外环与内环第一个连接处的中心坐标绘最终效果 showImg(https://segmentfault.com/img/bVbvCoX); 一、定义初始变量 let radius = 1...

zqhxuyuan 2019-08-05 17:43 评论0 收藏0
Canvas绘制动态进度条圆环

摘要：最终效果一定义初始变量外环半径圆环厚度内环半径开始角度结束角度圆心坐标圆心坐标将绘图原点移到画布中央将画布旋转度初始填充颜色二工具方法计算圆环上点的坐标弧度转角度角度转弧度三渲染方法渲染函数绘制外环计算外环与内环第一个连接处的中心坐标绘最终效果 showImg(https://segmentfault.com/img/bVbvCoX); 一、定义初始变量 let radius = 1...

Wuv1Up 2019-08-02 15:37 评论0 收藏0
微信小程序之圆形进度条（自定义组件）

摘要：前言昨天在微信小程序实现了圆形进度条，今天想把这个圆形进度条做成一个组件，方便以后直接拿来用。注意在组件中不应使用选择器属性选择器和标签名选择器。节点名即自定义组件的标签名节点属性即传递给组件的属性值，当自定义组件触发事件时，调用方法。前言昨天在微信小程序实现了圆形进度条，今天想把这个圆形进度条做成一个组件，方便以后直接拿来用。根据官方文档自定义组件一步一步来创建自定义组件第一...

AlanKeene 2019-08-05 13:00 评论0 收藏0
微信小程序之圆形进度条

摘要：需求概要小程序中使用圆形倒计时，效果图思路使用个一个是背景圆环，一个是彩色圆环。需求概要小程序中使用圆形倒计时，效果图：showImg(https://segmentfault.com/img/bV3Bko?w=265&h=267); 思路使用2个canvas 一个是背景圆环，一个是彩色圆环。使用setInterval 让彩色圆环逐步绘制。解决方案第一步先写结构一个盒...

陈江龙 2019-08-26 11:39 评论0 收藏0