<!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. 20145209刘一阳《JAVA程序设计》第六周课堂测试

    第六周课堂测试 1.现有以下代码,哪些选项插入到第5行可以通过编译?(BDF) 1.import java.util.*; 2． 3.Class FindStuff { 4.public static ...

  2. WPF RichTextBox自动调整高度

    原文:WPF RichTextBox自动调整高度 大概两年前的这个时间段,当时做项目遇到了一个问题:环境VS2005.WinForm,需要RichTextBox根据内容自动调整高度.当时用了各种方法都 ...

  3. sprinboot之mongodb

    一.MongoDB是一个基于分布式文件存储的数据库.由C++语言编写.旨在为WEB应用提供可扩展的高性能数据存储解决方案. MongoDB是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当 ...

  4. javaweb 解决jsp中${}传递中文值到后端以及get请求中文乱码的问题

    首先,不要用get传中文,我试了一些方法发现不行,所以果断决定用post传参, 这里用 encodeURI 进行一次编码传入后端 注意:${tplname} 要加 ' $.ajax({ url: '/ ...

  5. keras 修仙笔记二（ResNet算法例子）

    对于牛逼的程序员,人家都喜欢叫他大神:因为大神很牛逼,人家需要一个小时完成的技术问题,他就20分钟就搞定.Keras框架是一个高度集成的框架,学好它,就犹如掌握一个法宝,可以呼风唤雨.所以学keras ...

  6. linux 修改文件最大数

    ulimit -a 查看所有 open files (-n) 1024 是linux操作系统对一个进程打开的文件句柄数量的限制(也包含打开的套接字数量) ulimit -SHn 10000 ##临时修 ...

  7. 用C链表实现约瑟夫环问题

    问题:设有n个人围成一个圆圈,现从第s个人开始报数,数到第m的人出列,然后从出列的下一个人重新开始报数,数到第m的人再次出列,如此反复,直到所有的人全部出列为止.对于任意给定的n.s.m,求按出列次序 ...

  8. Float浮点数的使用和条件

    在这里简单的说一下,我对浮点数的理解,可能说的比较浅,老师也没有说,只是略微的提了一下,完全是我自己个人的理解. 我觉得float浮点数的用法和int的用法有些雷同,浮点数用于计算小数点单位,我们先可 ...

  9. Egret入门(一)--简介

    关于Egret 构建2D游戏,开源. TS + JS 完成打包后可以转换成HTML5的游戏(跨平台) Egret特点 1. 优秀的设计思想 2. 高效的渲染模块 3. 完善的配套工具 4. 灵活的工作 ...

  10. 基于Redis实现分布式锁（续）

    代码实现: redis实现分布式锁(lock:通过间隔时间段去请求Redis,来实现阻塞占用,一直到获取锁,或者超时. unlock:删除redis中key)