<!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. 并发之java.util.concurrent.atomic原子操作类包

    15.JDK1.8的Java.util.concurrent.atomic包小结 14.Java中Atomic包的原理和分析 13.java.util.concurrent.atomic原子操作类包 ...

  2. Android 获取控件滑动速度，速度跟踪器VelocityTracker；

    VelocityTracker 速度跟踪器 在写关于Android滑动的控件,如果用户手指在屏幕上(当前位置 - 起始位置 > 某个数值)就做一个界面切换,但是总感觉太生硬,只有满足上面的条件才 ...

  3. nodejs模块循环引用讲解

    CommonJS 模块的重要特性是加载时执行,即脚本代码在require的时候,就会全部执行.一旦出现某个模块被"循环加载",就只输出已经执行的部分,还未执行的部分不会输出. 让我 ...

  4. css学习1

    1.标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100 注意:还有一个权值比较特殊--继承也有权值但很低,有的文献提出它只有0.1,所以可以理解为继承的权值最低.

  5. xcode 自动签名原理

    签名的核心就是provision profile要与当前的bundle id及本地的私钥相匹配. teamid:每个开发者账号都会对应一个teamid.企业的开发这账号除了对应一个teamid外,下面 ...

  6. python中subprocess模块

    subprocess  模块 subprocess称之为子进程,进程是一个正在进行的程序 子进程是由另一个正在运行的程序启动的程序,例如QQ聊天点击一个链接,打开了浏览器,那么浏览器称之为QQ的子进程 ...

  7. fastjson中对象转化为字符串时过滤某字段

    fastjson中对象转化为字符串时过滤某字段,有两种方法: 一.在该字符定义上方添加"@JSONField(serialize=false)"注解: 二.调用含有Property ...

  8. Python模块定义和使用

    Python中所谓的模块就是一个Python文件,一个abc.py的文件就是一个名字叫abc的模块,一个xyz.py的文件就是一个名字叫xyz的模块.模块由代码.函数或类组成.编程中使用模块不仅可以提 ...

  9. 最适合入门的Laravel中级教程(四)前端开发

    Laravel 使用 npm 安装前端依赖: npm 是一个类似 composer 的工具: 用于管理前端的各种依赖包: 在使用之前需要先安装 node : Windows 下可以在官网下载安装: h ...

  10. 学JS的心路历程 - JS应用

    各家电商网站都推出了各种活动和现今优惠券,当时在逛PTT时看到了有篇文章,提供代码教大家用JS的方式抢票,看了一下后发现好像很多人好奇这是怎么做的,于是就想说想一篇文章来讲解一下. 我们先来看一下折价 ...