<!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. 20155325 2017-2018 1 课上测试、课下作业、实验——码云&博客链接汇总 《信息安全系统设计基础》

    第二周-课上 码云 https://gitee.com/bestiisjava2017/XinXiAnQuanXiTongSheJiJiChu20155325thl/tree/master/0927 ...

  2. python基础学习1-日志信息

      #!/usr/bin/env python # -*- coding:utf-8 -*- 日志 import logging # 5个级别的日志 DEBUG INFO WARNING ERROR ...

  3. NLPIR分词(c++接口整理）

    C/C++接口——对应的各个函数 函数1-bool NLPIR_Init(const char * sInitDirPath=0, int encoding=GBK_CODE,constchar*sL ...

  4. linux 之 jq

    1.安装 mac 安装: brew install jq centos 安装: yum install jq ubuntu: 安装: apt-get install jq 2.使用 cat test. ...

  5. sublime常用方法

    1.如何打开一个文件夹? project----->Add Folder to Project 2.如何同一个窗口下进行分屏操作? 使用快捷键:shift+Alt+2 3.如何使html代码进行 ...

  6. SQL Server Management Studio 评估期已过

    SQL2008破解: (1)将SQL安装光盘(或者ISO)放进去运行,进入安装界面. (2)选择“维护”中的“版本升级”,如图: (3)按照版本升级的向导,先输入产品密钥,也就是正式企业版的序列号: ...

  7. PersistentAliasAttribute & CalculatedAttribute & CalculatedPersistentAliasAttribute

    一,PersistentAliasAttribute-[XPO提供] Indicates that a property is not persistent and its value is calc ...

  8. Unity依赖注入(笔记)

    一.介绍 控制反转(Inversion of Control,简称IoC):整洁架构思想,不允许内部获知外部的存在,这就导致了我们必须在内层定义与外层交互的接口,通过依赖注入的方式将外层实现注入到内部 ...

  9. 如何用Fiddle工具实现手机抓包

    Fiddler官方下载地址:http://fiddler2.com/ 在做手机或移动端APP的接口测试时,我们可以使用fiddler对APP进行抓包确认,抓取对应的网络交互信息.在抓取的信息中可以看到 ...

  10. Git使用教程（一）---本地git管理

    之前写过不少小demo,因为没有很好的整理,很多demo都找不到了,必要的时候又要重新写这些demo:这是一个很头疼的问题,很烦躁.网上看到git的版本控制以及托管,很nice.开始学习使用git,关 ...