<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>绘制饼形图。</title>

    <style>

        canvas{

            border: 1px solid green;

        }

    </style>

</head>

<body>

    <!-- 绘制饼形图 -->

    <canvas width="500" height="500" id="canvas"></canvas>

</body>

<script>

    var canvas = document.getElementById('canvas');

    var ctx = canvas.getContext('2d');

    function toAngle(radian){

        return radian*180/Math.PI;

    }

    function toRadian(angle){

        return angle*Math.PI/180;

    }

    /*将饼状图画出来*/

    var colors = 'green,yellow,pink,blue,red,lightgreen,lightblue'.split(',');

    var text = 'HTML5,Canvas,Javascript,Css3,Ajax,框架封装,jQuery与移动Web'.split(',');

    var x0 = canvas.width/2,

        y0 = canvas.height/2,

        radius = 100,

        start = -5,

        distance = 20,

        padding = 5,

        step = 360/colors.length;

    for(var i = 0 ; i < colors.length ; i ++){

        ctx.beginPath();

        ctx.fillStyle = colors[i];

        ctx.moveTo(x0,y0);

        ctx.arc(x0,y0,radius,toRadian(start),toRadian(start+=step));

        ctx.fill();

        /*画斜线*/

        ctx.beginPath();

        ctx.strokeStyle = colors[i];

        var x1 = x0 + (radius+distance)*Math.cos(toRadian(( start-step/2 ))),

            y1 = y0 + (radius+distance)*Math.sin(toRadian(( start-step/2 )));

        ctx.moveTo(x0,y0);

        ctx.lineTo(x1,y1);

        ctx.stroke();

        /*写文字*/

        ctx.beginPath();

        ctx.fillStyle = colors[i];

        var textX = x1,

            textY = y1;

        if(start-step/2 > 90 && start-step/2 < 270){

            ctx.textAlign = 'right';

            textX = textX - padding;

        }else{

            ctx.textAlign = 'left';

            textX = textX + padding;

        }

        ctx.fillText(text[i],textX,textY-padding/2);

        /*画直线*/

        ctx.beginPath();

        ctx.moveTo(x1,y1);

        //计算文字的宽度

        var length = ctx.measureText( text[ i ] ).width

        if(start-step/2 > 90 && start-step/2 < 270){

            x1 += -2*padding-length;

        }else{

            x1 += 2*padding + length;

        }

        ctx.lineTo(x1,y1);

        ctx.stroke();

        /*画饼形图*/

        /*ctx.beginPath();

        ctx.fillStyle = colors[i];

        ctx.moveTo(x0,y0);

        ctx.arc(x0,y0,radius,toRadian(start),toRadian(start+=step));

        ctx.fill();*/

    }

</script>

</html>

利用canvas进行一个饼形图的绘制的更多相关文章

  1. 10分钟，利用canvas画一个小的loading界面

    首先利用定义下canvas得样式 <canvas width="1024" height="720" id="canvas" styl ...

  2. 利用canvas画一个实时时钟

    先放一张效果图: 下面是源代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  3. canvas的进阶 - 学习利用canvas做一个炫酷的倒计时功能

    先给大家贴一张图片,因为我不会上传视频(￣□￣||) ,请大家谅解了~  如果有知道怎么上传视频的大神还请指点指点 ^_^ ~ 然后看一下代码: html部分 :  <!DOCTYPE html ...

  4. 利用canvas写一个验证码小功能

    刚刚开始接触canvas,写个验证码小功能练练手,实现效果图如下: 主要代码如下: html <!DOCTYPE html> <html lang="en"> ...

  5. 利用canvas做一个简单个gif停止和播放

    var ImagePlayer = function(options) { this.control = options.control; this.image = options.image; th ...

  6. 1.利用canvas画一个太极图

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

  7. 用HTML5的canvas做一个时钟

    对于H5来说,canvas可以说是它最有特色的一个地方了,有了它之后我们可以随意的在网页上画各种各样的图形,做一些小游戏啊什么的.canvas这个标签的用法,在网上也有特别多的教程了,这里就不作介绍了 ...

  8. 利用Canvas进行绘制XY坐标系

    首先来一发图 绘制XY的坐标主要是利用Canvas setLeft和setBottom功能(Canvas内置坐标的功能) 1.首先WPF中的坐标系都是从左到右,从上到下的 即左上角位置(0,0)点,所 ...

  9. 利用canvas阴影功能与双线技巧绘制轨道交通大屏项目效果

    利用canvas阴影功能与双线技巧绘制轨道交通大屏项目效果 前言 近日公司接到一个轨道系统的需求,需要将地铁线路及列车实时位置展示在大屏上.既然是大屏项目,那视觉效果当然是第一重点,咱们可以先来看看项 ...

随机推荐

  1. ajax乱码的问题

    ajax 乱码情况与原因很多,本文只讲其中之一: 浏览器端正常的数据,用ajax提交到服务器上就乱码了. 当ajax的提交方式是get而不是post时,其所携带的数据不会被字符编码过滤器所拦截(事实上 ...

  2. 基于 IEEE 754 标准的 单精度浮点数计算方式 （未完成）

    def dec2bin(dec): if dec < 0: s = ' dec = dec * (-1) else: s = ' e = 127 dec = float(dec) r = int ...

  3. element-ui tree树形组件自定义实现可展开选择表格

    最近做项目遇到一个需求,表格里可以展开,可以选择,大概效果如下图: 一开始是在table组件里找方法,使用了表格的合并方法,效果是实现了,但是表格的多选每次触发时,都会执行好几次,而且没法实现一部分的 ...

  4. 如何使用新的glibc来编译自己的程序

    http://www.sysnote.org/2015/08/25/use-new-glibc/ 通常情况下我们都是直接使用glibc提供的一些库函数,但是某些特殊的情况,比如要修改glibc的一些代 ...

  5. [原]SuperMap GIS（JavaScript） 拉框放大和缩小功能实现

    版权声明:本文为博主原创文章,未经博主允许不得转载. var ZoomControl; /* * 拉框缩小 */ function ZoomOut(){ if(ZoomControl==null||Z ...

  6. 判断弹出框存在（alert_is_ present）

    系统弹窗这个是很常见的场景,有时候它不弹出来去操作的话,会抛异常.那么又不知道它啥时候会出来,那么久需要去判断弹窗是否弹出了 判断 alert 源码分析 class alert_is_present( ...

  7. 九度oj 1034 寻找大富翁 2009年浙江大学计算机及软件工程研究生机试真题

    题目1034:寻找大富翁 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:5323 解决:2123 题目描述:     浙江桐乡乌镇共有n个人,请找出该镇上的前m个大富翁. 输入:     ...

  8. FocusBI: SQL Server内核

    关注微信公众号:FocusBI 查看更多文章:加QQ群:808774277 获取学习资料和一起探讨问题. <商业智能教程>pdf下载地址 链接:https://pan.baidu.com/ ...

  9. Java ConcurrentModificationException异常原因和解决方法（转）

    摘自:http://www.cnblogs.com/dolphin0520/p/3933551.html#undefined 在前面一篇文章中提到,对Vector.ArrayList在迭代的时候如果同 ...

  10. window.location.href.substr(window.location.href.length - 6)

    if (window.location.href.substr(window.location.href.length - 6) == "flag=1") { var tOptio ...