<!DOCTYPE html>
<html>

<head>
<title> </title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
</head>

<body>
<div>
<div>
<canvas id="myCanvas" width="30px" height="30px">123</canvas>
</div>
</div>
<script type="text/javascript">
function yuanhuan(ctx, data, option) {
var cood = option.cood;
var radius = option.radius;
var lastpos = pos = -58;
for (var i = 0; i < data.length; i++) {
ctx.beginPath();
ctx.moveTo(cood.x, cood.y);
ctx.fillStyle = data[i].bgcolor;
pos = lastpos + Math.PI * 2 * data[i].value / 100;
ctx.arc(cood.x, cood.y, radius, lastpos, pos, false);
ctx.fill();
lastpos = pos;
}
ctx.beginPath();
ctx.fillStyle = "white";
radius *= 0.9;
ctx.arc(cood.x, cood.y, radius, 0, Math.PI * 2, false);
ctx.fill();
}
var data = [ //设置
{ bgcolor: 'pink', value: 100 },
{ bgcolor: '#FF766C', value: 20 }
];
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
yuanhuan(ctx, data, { cood: { x: 15, y: 15 }, radius: 15 })//radius圆半径 //cood圆心坐标
</script>
</body>

</html>

canvas画圆环的更多相关文章

  1. CSS3进度条 和 HTML5 Canvas画圆环

    看到一些高大上的进度条插件,然后想自己用CSS写.经过搜索资料之后,终于成功了.为了以后方便拿来用,或者复习.将代码贴出. HTML代码: 只需要两个div,外面的为一个有border的div id为 ...

  2. canvas画圆环%显示

    我: JS代码:  function circleProgress(id,value,average){  var canvas = document.getElementById(id);  var ...

  3. 使用javascript和canvas画月半弯

    使用javascript和canvas画月半弯,月半弯好浪漫!浏览器须支持html5 查看效果:http://keleyi.com/a/bjad/8xqdm0r2.htm 以下是代码: <!do ...

  4. canvas 画圈 demo

    html代码: <canvas id="clickCanvas2"  width="180" height="180" data-to ...

  5. 踩个猴尾不容易啊 Canvas画个猴子

    踩个猴尾不容易啊  Canvas画个猴子 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...

  6. canvas画随机闪烁的星星

    canvas画一颗星星: 规则的星星有内切圆和外切圆,每两个点之间的角度是固定的,因此可得到星星的每个点的坐标,画出星星. function drawStars(x,y,radius1,radius2 ...

  7. canvas画时钟

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  8. Canvas画椭圆的方法

    虽然标题是画椭圆,但是我们先来说说Canvas中的圆 相信大家对于Canvas画圆都不陌生   oGC.arc(400, 300, 100, 0, 2*Math.PI, false); 如上所示,直接 ...

  9. 深夜，用canvas画一个时钟

    深夜,用canvas画一个时钟 查看demo 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚 ...

随机推荐

  1. Schtasks命令详解(计划任务DOS批处理)

    Schtasks 安排命令和程序定期运行或在指定时间内运行.从计划表中添加和删除任务,按需要启动和停止任务,显示和更改计划任务. 创建新的计划任务. 语法 schtasks/create/tnTask ...

  2. 20165312 2017-2018-2 《JAVA程序设计》第6周学习总结

    20165312 2017-2018-2 <JAVA程序设计>第6周学习总结 一.在本周学习过程中遇到的问题以及对上周测试的查漏补缺 编写110页代码时出现问题,主类Test中创建CPU对 ...

  3. The perception and large margin classifiers

    假设样例按照到来的先后顺序依次定义为.为样本特征,为类别标签.任务是到来一个样例,给出其类别结果的预测值,之后我们会看到真实值,然后根据真实值来重新调整模型参数,整个过程是重复迭代的过程,直到所有的样 ...

  4. Java虚拟机--------JVM常见参数

    JVM 调优常见参数 Java1.7的jvm参数查看一下官方网站. http://docs.oracle.com/javase/7/docs/technotes/tools/windows/java. ...

  5. Tomcat 配置详解和优化

    2018年01月09日 18:14:41 tianxiaojun2014 阅读数:306   转自:https://www.cnblogs.com/xbq8080/p/6417671.html htt ...

  6. Android 开发 知晓各种id信息 获取线程ID、activityID、内核ID

    /** * Returns the identifier of this process's user. * 返回此进程的用户的标识符. */ Log.e(TAG, "Process.myU ...

  7. 中间件weblogic控制台创建数据源报错---根据真实故事改编

    1.在weblogic控制台创建数据源,有报错--不能创建数据源,图免 2.weblogic数据源管理节点所在服务器telnet测试,到数据库1521端口是通的 3.经过请教各路大神,得出结论:由于子 ...

  8. python大法好——模块（内置模块未完）

    模块 模块是非常简单的Python文件,单个Python文件就是一个模块,两个文件就是两个模块. Python模块有什么作用? 1.模块内有许多函数方法,利用这些方法可以更简单的完成许多工作.2.模块 ...

  9. django admin 设置（转载https://www.cnblogs.com/wumingxiaoyao/p/6928297.html）

    Django admin 一些有用的设置   Django自带的后台管理是Django明显特色之一,可以让我们快速便捷管理数据.后台管理可以在各个app的admin.py文件中进行控制.以下是我最近摸 ...

  10. Could not find a package,configuration file provided by "G2O" ,G2OConfig.cmake,g2o-config.cmake

    因为项目需要使用到g2o,所以自己从git上面clone下来, git clone https://github.com/RainerKuemmerle/g2o.git 然后: cd g2o mkdi ...