<!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. PostgreSQL的hook机制初步学习

    磨砺技术珠矶,践行数据之道,追求卓越价值 回到上一级页面:PostgreSQL内部结构与源代码研究索引页    回到顶级页面:PostgreSQL索引页 本文的目的一是为了备忘,二是为了抛砖引玉,希望 ...

  2. jQuery学习- 位置选择器

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. 洛谷 2953 [USACO09OPEN]牛的数字游戏Cow Digit Game

    洛谷 2953 [USACO09OPEN]牛的数字游戏Cow Digit Game 题目描述 Bessie is playing a number game against Farmer John, ...

  4. android 判断应用是否在前台显示

    在一些场景下我们需要知道应用是否在前台显示,当不在前台显示的时候,一些后台进程可以暂时停止,比如一些查询任务.不必要的线程.不需要的渲染等,以减少对设备资源的占用.判断应用是否在前台通常可以使用一下方 ...

  5. Python 字符串 整数 浮点数

    • 几个函数: str() : 将一个整数或者浮点数变成字符串 int() : 将一个浮点数或一个字符串变成整数 float : 将一个整数或者字符串变成一个浮点型数据 • 整数的运算永远是精确的,而 ...

  6. php+mysql 数据库分表分段备份程序--宋正河

    <?php //宋正河 转载请注明出处 set_time_limit(0); header('content-type:text/html;charset=utf-8'); mysql_conn ...

  7. [C++]linux下实现ls()函数遍历目录

    转载请注明原创:http://www.cnblogs.com/StartoverX/p/4600794.html 需求:在linux下遍历目录,输出目录中各文件名. 在linux下遍历目录的相关函数有 ...

  8. Python字符串符号：双引号/单引号用法注解。

    众所周知python中单引号和双引号常常被我们所使用,例如print.input等等. 但是对于打印输出所引导的字符串大多都是用双引号的形式来做,"Hello,python!",而 ...

  9. 与（&）、或（|）等运算符理解及其特殊用途

    1.按位与运算符(&) 在与运算中两个开关是串联的,如果我们要开灯,需要两个开关都打开灯才会打开.理解为A与B都打开,则开灯,所以是1&1=1任意一个开关没打开,都不开灯,所以其他运算 ...

  10. navicat连接mysql出现1251错误

    刚刚安装热乎的navicat发现出现1251错误,原因不大清楚,找到一个解决办法: 将mysql的密码重新重置一遍: 1.打开命令行 ,进入mysql所在的目录,输入 mysql -uroot -p ...