<!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. 20165312 实验一 Java开发环境的熟悉

    20165312 实验一 Java开发环境的熟悉 一.实验内容及步骤 (一)使用JDK编译.运行简单的Java程序 Ctrl+Shift+T打开终端 输入cd cxgg20165312/test进入目 ...

  2. phpwind v9存在命令执行漏洞（登陆后台）

    已知漏洞:https://www.seebug.org/vuldb/ssvid-94465 phpwind v9最新版存在命令执行漏洞(登陆后台) Phpwind_v9.0.2(最新版),phpwin ...

  3. 涂抹mysql笔记-数据导出导入

    数据导出导入<>利用CSV存储引擎加载数据:CSV存储引擎基于CSV格式文件存储数据,CSV格式是纯文本格式的文件,以逗号分隔取值.CSV引擎表的所有列值不能为空.Excel可以直接打开有 ...

  4. postgresql分区（引用）

    1 建立大表.   2 创建分区继承   3 定义Rule或者Trigger? 1 建立大表        CREATE TABLE student (student_id bigserial, na ...

  5. python-web自动化-三种等待方式

    当有元素定位不到时,比如下拉框,弹出框等各种定位不到时:一般是两种问题:1 .有frame :2.没有加等待 下面学习三种等待方式: 1.强制等待 sleep(xx)这种方法简单粗暴,不管浏览器是否加 ...

  6. Ubuntu16.04下修改MySQL数据的默认存储位置

    由于在Linux下MySQL默认是存储在/var/lib/mysql目录下,mysql的数据会非常大,由于/var所划分的空间不够大,所以我们需要将mysql数据存放路径修改一下,放到大分区里面,以便 ...

  7. atom常用插件

    汉化 simplified-chinese-menureact atom-react-snippets-0.5.0polymer atom-polymer-0.13.0polymer Atom-Pol ...

  8. tomcat advanced (RUNNING)

    1. 1. tomcat

  9. Oracle SQL 优化规则

    一.问题的提出 在应用系统开发初期,由于开发数据库数据比较少,对于查询SQL语句,复杂视图的的编写等体会不出SQL语句各种写法的性能优劣,但是如果将应用 系统提交实际应用后,随着数据库中数据的增加,系 ...

  10. gentoo 图像方面的软件

    图像方面的软件一般包括:查看图像,屏幕截图,图像修改. 查看图像简单的可以安装 feh,但是 feh 一般作为墙纸来用.稍微好一些的是 gqview. 屏幕截图可以用 screengrab,使用的时候 ...