<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>canvas制作原生的百分比圆形比例等</title>
<style>
*{margin:0;padding:0;}
body{text-align:center;}
</style>
</head>
<body>
<div class="chart">
    <canvas  id="canvas" width="300" height="300" style="border:1px solid #e5e5e5"></canvas>
</div>
</body>
</html>
<script type="text/javascript">
　window.onload = function(){
    var draw = document.getElementById("canvas");
    if(!draw.getContext){
      return false;
    }
    var context=draw.getContext('2d'), centerX=draw.width/2,
        centerY=draw.height/2,
        angle= 0.6, //占的百分数
        color=[], //"#e5e5e5","red","#F00"
        font="40px Arial";
        speed = 0; //从度数开始50---》表示从50度开始
        context.lineCap="round";  //square 平角的帽

    //绘制外圈的圆
    function blueCircle(){
        context.save();//save() 方法保存当前图像状态的一份拷贝。
        context.strokeStyle = color[0] || "#e5e5e5"; //设置描边样式
        context.lineWidth = 5; //设置线宽
        context.beginPath();//路径开始
        //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)
        context.arc(centerX,centerY,centerX-5,0,2*Math.PI,false);
        context.stroke();
        context.closePath(); //路径结束
        context.restore();//save() 方法把当前状态的一份拷贝压入到一个保存图像状态的栈中。这就允许您临时地改变图像状态，然后，通过调用 restore() 来恢复以前的值。
    }

     //绘制红色外圈
    function redCircle(n){
        context.save();
        context.strokeStyle = color[1] || "red"; //设置描边样式
        context.lineWidth = 5; //设置线宽
        context.beginPath();
        context.arc(centerX, centerY, centerX-5 ,  -Math.PI /2, (n * 3.6 - 90) * Math.PI / 180, false);
        context.stroke();
        context.closePath();
        context.restore();
    }
     //百分比文字绘制
    function text(n){
        context.save(); //save和restore可以保证样式属性只运用于该段canvas元素
        context.beginPath();
        context.font =font || "40px Arial"; //设置字体大小和字体
        context.fillStyle=color[2] || "#333";
        context.textAlign='center';//文本程度对齐方法
        context.textBaseline='middle';//文本垂曲标的目的，基线位置
        //绘制字体，并且指定位置
        context.fillText(n.toFixed(0)+"%", centerX, centerY);
        context.stroke(); //执行绘制
        context.closePath();
        context.restore();
    }

    //自己一直调用自己动画循环
    var timer=null;
    (function drawFrame(){
        timer=setTimeout(drawFrame,10);
        context.clearRect(0, 0, draw.width, draw.height);
        blueCircle();
        redCircle(speed);
        text(speed);
        if(speed >= angle*100){
            clearTimeout(timer);
        }
        speed += 0.2;
    }());
}
</script>

canvas制作原生的百分比圆形比例等的更多相关文章

  1. Canvas制作动态进度加载水球

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 用Canvas制作简单的画图工具

    今天用Canvas制作了一个画图工具,非常简单,功能也不是很多,主要有背景网格,画线,画圆,画矩形和画圆角矩形,也用到了canvas的一些基本知识,在这里一一列举. 1.线段的绘制: 如何绘制真正的1 ...

  3. H5上传图片并使用canvas制作海报

    马上就要"十一"国庆节了,又恰逢公司已经三周岁了,所以市场部和产品共同策划了一个"正青春,共成长"的主题代言活动,准备在国庆节以及中秋节期间让公司员工和用户为公 ...

  4. 使用canvas制作的移动端color picker

    使用canvas制作的移动端color picker 项目演示地址(用手机或者手机模式打开) 我在另一个中demo,需要用到color picker,但是找不到我需要的移动端color picker, ...

  5. 酷！使用 jQuery & Canvas 制作相机快门效果

    在今天的教程中,我们将使用 HTML5 的 Canvas 元素来创建一个简单的摄影作品集,它显示了一组精选照片与相机快门的效果.此功能会以一个简单的 jQuery 插件形式使用,你可以很容易地整合到任 ...

  6. 如何使用 HTML5 Canvas 制作水波纹效果

    今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效果.水波效果以图片为背景,点击图片任意位置都会触发.有时候,我们使用普通的 Javasc ...

  7. 简单实用的纯CSS百分比圆形进度条插件

    percircle是一款简单实用的纯CSS百分比圆形进度条插件.你不需要做任何设置,只需要按该圆形进度条插件提供的标准HTML结构来编写代码,就可以生成一个漂亮的百分比圆形进度条. 首先要做的就是引入 ...

  8. 使用canvas制作在线画板

    canvas绘图的强大功能,让人前仆后继的去研究它.代码全部加起来不足百行.还用到了h5中的<input type="color"/>和<input type=& ...

  9. 怎样用HTML5 Canvas制作一个简单的游戏

    原文连接: How To Make A Simple HTML5 Canvas Game 自从我制作了一些HTML5游戏(例如Crypt Run)后,我收到了很多建议,要求我写一篇关于怎样利用HTML ...

随机推荐

  1. WPF不同线程之间的控件的访问

    原文:WPF不同线程之间的控件的访问 WPF不同线程之间的控件是不同访问的,为了能够访问其他线程之间的控件,需要用Dispatcher.Invoke执行一个新的活动即可. 例如: public voi ...

  2. python基础学习1-装饰器及应用

    def outer(func): #定义装饰器 def inner(*args,**kwargs): #定义万能参数 print("log") ret = func(*args,* ...

  3. Deep Learning 资料总结

    http://colah.github.io/posts/2014-03-NN-Manifolds-Topology/ : 理解神经网络   ELU:

  4. Python_sklearn机器学习库学习笔记（七）the perceptron(感知器）

    一.感知器 感知器是Frank Rosenblatt在1957年就职于Cornell航空实验室时发明的,其灵感来自于对人脑的仿真,大脑是处理信息的神经元(neurons)细胞和链接神经元细胞进行信息传 ...

  5. 菜鸟vimer成长记——第4.2章、编程插件

    简介 这部分的插件是与编程相关的插件.主要涉及两大块:所有编程语言通用的插件,以及各个语言独有的插件.插件的数量和合理性,这可能是一个不断累积和修正的过程. 个人感觉,现在比较适合sh,html,ma ...

  6. 运行用例时，报错Unknow Error：Element xxx is not clickable……的解决方法

    P.S:近期selenium官方更新了版本以解决此问题 通常这种情况是由于在点击该元素时,js更换了元素属性造成的. 所以可以采用js的方式进行处理 方法如下: WebDriver driver = ...

  7. 【转】Linux - CentOS 7网络配置

    Linux - CentOS 7网络配置 https://blog.csdn.net/J080624/article/details/78083988   安装完VM后,需要进行网络配置.第一个目标为 ...

  8. jmeter控制器（二）

    循环控制器: 顾名思义就是做循环控制的,与线程组的循环一样的,不过这里的循环控制器是用在一个单独的模块的,而在线程组里面的循环是作用于全局的.循环控制器里面设置的循环次数是局部有效,只控制自己范围内的 ...

  9. shell中与运算 cut切分行 if while综合在一起的一个例子

    前言: 公司要统计 treasury库hive表磁盘空间,写了个脚本,如下: 查询hive仓库表占用hdfs文件大小: hadoop fs -du -h  /user/hive/warehouse/t ...

  10. .net中 多线程 笔记(基础)

    1. 在进程中可以有多个线程同时执行代码.进程之间是相对独立的,一个进程无法访问另一个进程的数据(除非利用分布式计算方式),一个进程运行的失败也不会影响其他进程的运行,Windows系统就是利用进程把 ...