canvas画倒计时

最新推荐文章于 2024-06-17 14:02:51 发布

听海丶

最新推荐文章于 2024-06-17 14:02:51 发布

阅读量546

点赞数

分类专栏： HTML5 文章标签： canvas 函数标签

本文链接：https://blog.youkuaiyun.com/qq_36436877/article/details/80185227

版权

HTML5 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何利用HTML5的canvas元素创建一个动态显示的倒计时效果。通过定义函数来更新画布上的时间，并详细讲解每个步骤，包括设置定时器、计算剩余时间、在canvas上绘制文字等技术细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//画倒计时
    function drawProcess(num) {

        var process = num / 600 * 100;

        var text = Math.ceil(num / 10);

        // 一个canvas标签  
        var canvas = $(".process")[0];
        // 拿到绘图上下文,目前只支持"2d"  
        var context = canvas.getContext('2d');
        // 将绘图区域清空,如果是第一次在这个画布上画图,画布上没有东西,这步就不需要了  
        context.clearRect(0, 0, 48, 48);

        // ***开始画一个灰色的圆  
        context.beginPath();
        // 坐标移动到圆心  
        context.moveTo(24, 24);
        // 画圆,圆心是24,24,半径24,从角度0开始,画到2PI结束,最后一个参数是方向顺时针还是逆时针  
        context.arc(24, 24, 24, 0, Math.PI * 2, false);
        context.closePath();
        // 填充颜色  
        context.fillStyle = '#ddd';
        context.fill();
        // ***灰色的圆画完  

        // 画进度  
        context.beginPath();
        // 画扇形的时候这步很重要,画笔不在圆心画出来的不是扇形  
        context.moveTo(24, 24);


        // 跟上面的圆唯一的区别在这里,不画满圆,画个扇形  
//      context.arc(24, 24, 24, 0, Math.PI * 2 * process / 100, false);
        context.arc(24, 24, 24, -Math.PI * 1 / 2, -(Math.PI * 2 * process / 100) + (Math.PI * 3 / 2), true);
        context.closePath();
        context.fillStyle = '#00bb00';
        context.fill();

        // 画内部空白  
        context.beginPath();
        context.moveTo(24, 24);
        context.arc(24, 24, 21, 0, Math.PI * 2, true);
        context.closePath();
        context.fillStyle = 'rgba(255,255,255,1)';
        context.fill();

        //在中间写字  
        context.font = "bold 9pt Arial";
        context.fillStyle = '#213447';
        context.textAlign = 'center';
        context.textBaseline = 'middle';
        context.moveTo(24, 24);
        context.fillText(text, 24, 24);

    }

//效果图
这里写图片描述