HTML5canvas 绘制一个圆环形的进度表示实例

HTML5 canvas 绘制圆环形进度

先看一下画出来的效果,如下图,这样一个圆环形的进度.

我这里使用HTML5的Canvas来要制作这样一个圆环形的进度,

首先是HTML页面,HTML5的文档标识是:

<!DOCTYPE html>

这个文档标识要比HTML4的简单多了.

第二步,在页面上创建一个Canvas画布元素:

<canvas class="process" width="48px" height="48px">61%</canvas>

我这里创建了一个长宽都是48像素的画布,因为我要画的圆外直径是48个像素的,在canvas元素中间写的是"61%",这个文字可不是显示在圆环中间的那个哦,这个61%是当老的浏览器不支持canvas元素时显示的文字.

好了,到此为止HTML页面的内容就基本完成了,接下来就交给Javascript了,用Javascript来描绘圆环.

function drawProcess() {
  // 选出页面上所有class为process的canvas元素,然后迭代每一个元素画图(这里用Jquery的选择器选的)
  $('canvas.process').each(function() {
      // 第一部先拿到canvas标签中间的文字,就是那个61%(这里的stringTrim方法是我自己的方法,去前后空格的方法很多的,这里就不贴出来了)
    var text = commonutil.stringTrim($(this).text());
    var process = text.substring(0, text.length-1); 

      // 一个canvas标签
    var canvas = this;
      // 拿到绘图上下文,目前只支持"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.closePath();
    context.fillStyle = '#e74c3c';
    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.beginPath();
    context.arc(24, 24, 18.5, 0, Math.PI * 2, true);
    context.closePath();
      // 与画实心圆的区别,fill是填充,stroke是画线
    context.strokeStyle = '#ddd';
    context.stroke(); 

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

好了,画完了.要看到效果别忘了调用一下画图的drawprocess方法哦.

大小: 2.4 KB 查看图片附件

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

赞 (0)

相关推荐

  • Android使用Canvas绘制圆形进度条效果

    Android使用Canvas绘制圆形进度条效果

    前言 Android自定义控件经常会用到Canvas绘制2D图形,在优化自己自定义控件技能之前,必须熟练掌握Canvas绘图机制.本文从以下三个方面对Canvas绘图机制进行讲解: 画布Canvas 画笔Paint 示例圆形进度条 画布Canvas 首先,来看一下Android官网对Canvas类的定义: The Canvas class holds the "draw" calls.To draw something, you need 4 basic components: A B

  • Canvas 制作动态进度加载水球详解及实例代码

    Canvas 制作动态进度加载水球详解及实例代码

    Canvas 动态进度加载水球 前言 之前看到一些球型的动态加载的效果,一直想自己动手做一个,正好这段时间重温了一个Canvas,所以就尝试了一下. 实现思路 关于水波的实现,使用了sin()函数,通过每一帧不断的移动sin()函数曲线,实现水波动态效果.然后,通过绘制圆形路径,进行clip(),实现球型效果. sin()函数相关 这里说一下sin()函数的相关基础,对于绘制水波的影响. 看一下图,回顾一下中学sin()函数的基础. 从图中可以看出,当函数为sin(x)时,值域为[-1, 1],

  • canvas绘制环形进度条

    canvas绘制环形进度条

    效果如下: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.

  • HTML5canvas 绘制一个圆环形的进度表示实例

    HTML5canvas 绘制一个圆环形的进度表示实例

    HTML5 canvas 绘制圆环形进度 先看一下画出来的效果,如下图,这样一个圆环形的进度. 我这里使用HTML5的Canvas来要制作这样一个圆环形的进度, 首先是HTML页面,HTML5的文档标识是: <!DOCTYPE html> 这个文档标识要比HTML4的简单多了. 第二步,在页面上创建一个Canvas画布元素: <canvas class="process" width="48px" height="48px"&g

  • JavaScript canvas实现环形渐变进度条

    JavaScript canvas实现环形渐变进度条

    最近有个需求要做环形渐变色进度条,去网上找了半天没找到合适的,大多数渐变色都是径向渐变,所以自己用canvas写了个环形渐变的图: 这个渐变其实就是把圆环分成许多小块分别绘制的,所以小块分的越多,渐变色越均匀,但是当圆环尺寸比较小的时候,边缘特别毛糙,需要适当减少份数,代码里是用unit 这个变量手动控制的,算是一个缺陷吧. 代码在此: <!DOCTYPE html> <html>     <head>         <style>            

  • html+js+highcharts绘制圆饼图表的简单实例

    html+js+highcharts绘制圆饼图表的简单实例

    实例如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type&q

  • 通过Turtle库在Python中绘制一个鼠年福鼠

    turtle库是一个很经典的绘图库,其最初来自于1967年创造的logo编程语言,之后被Python编写放到了Python的内置模块中.网络上有很多借助于turtle绘制精美图像的案例.比如小猪佩奇.皮卡丘.柯基犬等等.趁着新年假期还未结束,今天州的先生(https://zmister.com)为大家带来一个福鼠的绘制. 一.绘制鼠头 首先,咱们(https://zmister.com)把鼠的头给绘制了.鼠头主要是由圆来构成,脸庞是一个大圆,耳朵.眉毛.眼睛.嘴角和鼻子也都是由不同弧度的圆构成.

  • 使用python的turtle函数绘制一个滑稽表情

    Turtle库是Python语言中一个很流行的绘制图像的函数库,想象一个小乌龟,在一个横轴为x.纵轴为y的坐标系原点,(0,0)位置开始,它根据一组函数指令的控制,在这个平面坐标系中移动,从而在它爬行的路径上绘制了图形. turtle绘图的基础知识: 1. 画布(canvas) 画布就是turtle为我们展开用于绘图区域,我们可以设置它的大小和初始位置. 设置画布大小 turtle.screensize(canvwidth=None, canvheight=None, bg=None),参数分别

  • Android 贝塞尔曲线绘制一个波浪球

    Android 贝塞尔曲线绘制一个波浪球

    目录 前言 一.绘制 backgroundColor 文本 二.构建 circlePath 三.绘制波浪线 四.取交集 五.绘制 foregroundColor 文本 六.添加动画 七.使用 前言 当 flutter 的现有组件无法满足产品要求的 UI 效果时,我们就需要通过自绘组件的方式来进行实现了.本篇文章就来介绍如何用 flutter 自定义实现一个带文本的波浪球,效果如下所示: 先来总结下 WaveLoadingWidget 的特点,这样才能归纳出实现该效果所需要的步骤: widget

  • php绘制一个扇形的方法

    本文实例讲述了php绘制一个扇形的方法.分享给大家供大家参考.具体如下: php绘制一个扇形.关于参数说明,除最后一个参数外,其它都与弧线的参数一样,请参考上一篇<php绘制一条弧线的方法>.最后一个参数有四种类型.分别是: IMG_ARC_PIE.IMG_ARC_CHORD.IMG_ARC_NOFILL和IMG_ARC_EDGED,具体参数说明见php手册的 imagefilledarc 画扇形函数. 复制代码 代码如下: <?php //1.创建画布 $im = imagecreat

  • javascript实现一个网页加载进度loading

    loading随处可见,比如一个app经常会有下拉刷新,上拉加载的功能,在刷新和加载的过程中为了让用户感知到 load 的过程,我们会使用一些过渡动画来表达.最常见的比如"转圈圈","省略号"等等. 网页loading有很多用处,比如页面的加载进度,数据的加载过程等等,数据的加载loading很好做,只需要在加载数据之前(before ajax)显示loading效果,在数据返回之后(ajax completed)结束loading效果,就可以了. 但是页面的加载进

  • php绘制一个矩形的方法

    本文实例讲述了php绘制一个矩形的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <?php //1.创建画布 $im = imagecreatetruecolor(300,200);//新建一个真彩色图像,默认背景是黑色,返回图像标识符.另外还有一个函数 imagecreate 已经不推荐使用. //2.绘制所需要的图像 $red = imagecolorallocate($im,255,0,0);//创建一个颜色,以供使用 imagerectangle($im,30,3

  • Android 快速绘制一个圆角矩形的实例

    android 开发过程中,经常需要绘制一些简单的颜色图形.下面贴上一段最简单的图形. 圆角矩形: res\drawable\shape_small_label.xml <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <!-- 内部颜色 --> &l

随机推荐