Canvas实现progress效果

据说本贵族圈每月不分享就邀请雪糕。。。所以分享下一个简单的Canvas插件   Canvas元素是HTML5的一部分,允许脚本语言动态渲染位图像,你可以使用javascript用它来绘制图形、图标、以及其它任何视觉性图像。它也可用于创建图片特效和动画。(反正就是好东西)   既然是HTML5的特性,那必须是只有支持HTML5的浏览器才能使用,兼容性如下图:

使用到的API

参考资料~W3School

beginPath

定义:开始一条路径,或重置当前的路径。

      context.beginPath();

arc

定义:创建弧/曲线(用于创建圆或部分圆)。

      context.arc(x, y , r, sAngle, eAngle, counterclockwise);
参数
  • x:圆的中心的 x 坐标。
  • y:圆的中心的 y 坐标。
  • r:圆的半径。
  • sAngle:起始角,以弧度计。(弧的圆形的三点钟位置是 0 度)。
  • eAngle:结束角,以弧度计。
  • counterclockwise:可选。规定应该逆时针还是顺时针绘图。false = 顺时针,true = 逆时针。

stroke

定义:绘制当前路径的边框

    context.stroke()

measureText

    context.measureText(text).width;

定义:返回包含一个对象,该对象包含以像素计的指定字体宽度。

参数
  • text:要测量的文本

fillText

定义:在画布上绘制填色的文本

    context.fillText(text, x, y, maxWidth);
参数
  • text:规定在画布上输出的文本。
  • x:开始绘制文本的 x 坐标位置(相对于画布)。
  • y:开始绘制文本的 y 坐标位置(相对于画布)。
  • maxWidth:可选。允许的最大文本宽度,以像素计。

clearRect

定义:清空给定矩形内的指定像素。

    context.clearRect(x, y, width, height);
参数
  • x:要清除的矩形左上角的 x 坐标
  • y:要清除的矩形左上角的 y 坐标
  • width:要清除的矩形的宽度,以像素计
  • height:要清除的矩形的高度,以像素计

实现思路

  了解了以上API后,我们就可以动手干活了,其实很简单。实现只有3个步骤。

1,画出带有透明度的内圆
    context.beginPath();

    //设置透明度,样式与线条宽度
    this.extend(context, {
        globalAlpha: inSideCircle.alpha,
        strokeStyle: inSideCircle.style,
        lineWidth: inSideCircle.lineWidth
    })            

    //绘制圆
    context.arc(this.hElWidth, this.hElHeight, option.radius + outSideCircle.lineWidth - inSideCircle.lineWidth, 0, pi * 2, false);

    //画出圆形
    context.stroke();
2,根据进度画出外圆
    context.beginPath();

    //设置透明度,样式与线条宽度
    this.extend(context, {
        globalAlpha: outSideCircle.alpha,
        strokeStyle: outSideCircle.style,
        lineWidth: outSideCircle.lineWidth
    })                            

    //根据当前进度绘制圆
    context.arc(this.hElWidth, this.hElHeight, option.radius, -(pi / 2), pi * 2 / 100 * (n - 25), false);

    //画出圆形
    context.stroke();
3,根据进度画出数值(0-100%)
    context.beginPath();

    this.extend(context, {
        font: textObj.font,
        fillStyle: textObj.style,
        globalAlpha: textObj.alpha
    })            

    //得出数值宽度
    numberWidth = context.measureText(number).width;

    context.fillText(number, this.hElWidth - numberWidth / 2, this.hElHeight + 10 / 3)
最后暴露出setProgress设置进度函数给外部调用即可
    //清除canvas内容
    this.context.clearRect(0, 0, this.elWidth, this.elHeight);                            

    this._drawCircle(n);

    this._drawText(n);

测试用例

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
        <meta content="yes"name="apple-mobile-web-app-capable"/>
        <meta content="black"name="apple-mobile-web-app-status-bar-style"/>
        <meta name="format-detection"content="telphone=no"/>
        <title>canvasProgress</title>
    </head>
    <body>    
    <canvas id="canvasEl" style="background-color:#000" height="100px" width="100px"></canvas>
    </body>
    <script type="text/javascript" src="progress.js"></script>
    <script type="text/javascript">
        var progress = new Progress({element: document.getElementById('canvasEl')})

        var n = 0;

        var timer = setInterval(function() {
            if (n++ !== 100) {
                progress.setProgress(n);        
            } else {
                clearInterval(timer);
            }
        }, 100)

    </script>
    </html>

实现效果

背景与进度颜色根据喜好变换

最后

今天分享就到此位置了,有兴趣的可以去github看下代码。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏HTML5学堂

Canvas 动画制作

在前面的两篇文章Canvas 基本绘制(下)、Canvas 基本绘制(上)中,介绍了Canvas的基本绘制。学过SVG的童鞋应该知道它是可以制作动画,那么Can...

3648
来自专栏HTML5学堂

Canvas 基本绘制(上)

HTML5学堂:之前的文章与大家分享了SVG的一系列操作,但是SVG也是存在一些劣势,所以今天开始为大家分享介绍HTML5 Canvas的相关知识,Canvas...

34513
来自专栏Python

Python终端输出打印彩色字体的方法

一  实现过程 终端的字符颜色是用转义序列控制的,是文本模式下的系统显示功能,和具体的语言无关。    转义序列是以ESC开头,即用\033来完成(ESC的A...

1745
来自专栏葡萄城控件技术团队

HTML5 & CSS3初学者指南(4) – Canvas使用

介绍 传统的HTML主要用于文本的创建,可以通过<img>标签插入图像,动画的实现则需要第三方插件。在这方面,传统的HTML极其缺乏满足现代网页多媒体需求的能力...

1856
来自专栏Golang语言社区

前端游戏编程基础-如何实现Canvas图像的拖拽、点击等操作

希望能对Canvas绘制出来的图像进行点击、拖拽等操作,因为Canvas绘制出的图像能很好的美化。好像是想做炉石什么的游戏,我也没玩过。 Canvas在我的理解...

3028
来自专栏Golang语言社区

前端游戏编程基础-如何实现Canvas图像的拖拽、点击等操作

希望能对Canvas绘制出来的图像进行点击、拖拽等操作,因为Canvas绘制出的图像能很好的美化。好像是想做炉石什么的游戏,我也没玩过。 Canvas在我的理解...

4547
来自专栏一“技”之长

HTML5中Canvas元素的使用总结 原

    Canvas提供了开发者自定义绘图的接口,我们可以公国getContext()函数来获取绘图上下文进行绘制操作,这个函数中可以传入两个参数,其中第1个参...

531
来自专栏青玉伏案

iOS可视化动态绘制连通图(Swift版)

上篇博客《iOS可视化动态绘制八种排序过程》可视化了一下一些排序的过程,本篇博客就来聊聊图的东西。在之前的博客中详细的讲过图的相关内容,比如《图的物理存储结构与...

2237
来自专栏韩伟的专栏

Unity2D手册翻译(三)

Sprite Editor 有时候一个Sprite纹理只包含一个图形原素,但是把多个相关的图形一起合并到一个图片中会更方便。例如,这个图片可能包含某一个角色的多...

2904
来自专栏腾讯IVWEB团队的专栏

Canvas 实现 progress 效果

分享下一个简单的Canvas插件 ,Canvas元素是HTML5的一部分,允许脚本语言动态渲染位图像,你可以使用javascript用它来绘制图形。

4470

扫码关注云+社区