<!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. k8s Nodeport方式下service访问，iptables处理逻辑(转)

    原文 https://www.myf5.net/post/2330.htm k8s Nodeport方式下service访问,iptables处理逻辑 2017年07月11日 0条评论 976次阅读 ...

  2. Linux下的文件操作——基于文件指针的文件操作(缓冲)

    目录操作 创建和删除目录: 原型为: #include <sys/stat.h> #include <sys/types.h> #include <unistd.h> ...

  3. LeetCode【88. 合并两个有序数组】

    首先想到的方法就是,假设一个nums3数组,然后,比较nums1与nums2的数值大小,然后,放在nums3中,再将nums3转移到nums1中. 实现起来很麻烦,1.没有考虑到下标问题,结果就Arr ...

  4. 编写高质量java代码151个建议

    http://blog.csdn.net/aishangyutian12/article/details/52699938 第一章  Java开发中通用的方法和准则 建议1:不要在常量和变量中出现易混 ...

  5. C语言数据结构基础学习笔记——C语言基础

    抽象数据类型(ADT)是指一个数学模型以及定义在该模型上的一组操作,通常用(数据对象,数据关系,基本操作集)这样的三元组来表示抽象数据类型. 数据结构是相互之间存在一种或多种特定关系的数据元素的集合, ...

  6. centos7安装elasticsearch6.3.x集群并破解安装x-pack

    一.环境信息及安装前准备 主机角色(内存不要小于1G): 软件及版本(百度网盘链接地址和密码:链接: https://pan.baidu.com/s/17bYc8MRw54GWCQCXR6pKjg 提 ...

  7. 常见的php模式

    php中6种常见的设计模式 单例模式 观察者模式 策略模式 工厂模式 注册模式 适配器模式 单例模式 Db.php<?php /** * 单例模式 */ class Db { private s ...

  8. 1-hadoop、mr

    1.HDFS的优缺点: 优点: ① 高容错 ② 可扩展 ③ 适合大文件存储 ④ 可构建在廉价的机器上 缺点: ① 高延迟 ② 文件不能修改 ③ 不适合小文件存储 2.HDFS架构(类似于文件系统): ...

  9. Fragment的粗浅理解

    Fragment: 1.它是对于Activity界面实现的一种途径,相对于已经绑定的Layout,他更轻便,更灵活,更具有自由度和可设计性. 2.Fragment的功能正如他的正文意思所言,他是一个片 ...

  10. ceph结构详解

    引言 那么问题来了,把一份数据存到一群Server中分几步? Ceph的答案是:两步. 计算PG 计算OSD 计算PG 首先,要明确Ceph的一个规定:在Ceph中,一切皆对象. 不论是视频,文本,照 ...