<!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 自定义ComboBox样式，自定义多选控件

    原文:WPF 自定义ComboBox样式,自定义多选控件 一.ComboBox基本样式 ComboBox有两种状态,可编辑和不可编辑状态.通过设置IsEditable属性可以切换控件状态. 先看基本样 ...

  2. python基础学习1-随机验证码

    import random i=random.randrange(65,90) #根据设置的范围生成随机数字 print(i) c=chr(i)#根据随机产生的数字 然后用chr生成对应ASCII 数 ...

  3. 【Java源码解析】Thread

    简介 线程本质上也是进程.线程机制提供了在同一程序内共享内存地址空间运行的一组线程.对于内核来讲,它就是进程,只是该进程和其他一下进程共享某些资源,比如地址空间.在Java语言里,Thread类封装了 ...

  4. 大数据中HBase集群搭建与配置

    hbase是分布式列式存储数据库,前提条件是需要搭建hadoop集群,需要Zookeeper集群提供znode锁机制,hadoop集群已经搭建,参考 Hadoop集群搭建 ,该文主要介绍Zookeep ...

  5. CF刷题-Codeforces Round #481-G. Petya's Exams

    题目链接:https://codeforces.com/contest/978/problem/G 题目大意:n天m门考试,每门考试给定三个条件,分别为:1.可以开始复习的日期.2.考试日期.3.必须 ...

  6. RPC之Jersey服务调用处理（一）

    1.定义:        远程过程调用, 也叫远程函数调用, 最早出现在Sun公司和HP公司的运行Unix操作系统的计算机中,用于系统间通信的一种机制.        RPC的基本通信模型是基于Cli ...

  7. FFMS2 API 译文 [原创]

    FFMS2 又称 FFmpegSource2,参阅 https://github.com/FFMS/ffms2. 原文:https://github.com/FFMS/ffms2/blob/maste ...

  8. CocoStuff—基于Deeplab训练数据的标定工具【五、训练成果分析】

    一.说明 本文为系列博客第五篇,主要展示训练的结果,以及对训练进行分析. *注:暂未进行大量的数据训练以及IoU测算,目前只做到使用Matlab将训练结果的mat文件可视化. 二. *占坑

  9. WinDbg使用学习

    拿到软件崩溃之后产生的crash文件,后缀名为dump 使用winDbg的File-----> Open Crash Dump 打开Crash文件 File---------> Symbo ...

  10. logout命令详解

    基础命令学习目录首页 logout指令让用户退出系统,其功能和login指令相互对应.语法 logout