<!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. EntityFramework First,FirstOrDefault,Single,SingleOrDefault的区别

    操作符 如果源序列是空的 源序列只包含一个元素 源序列包含多个元素 First 抛异常 返回该元素 返回第一个元素 FirstOrDefault 返回default(TSource) 返回该元素 返回 ...

  2. Vue-cli3 WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB)

    在vue.config.js里 添加 configureWebpack : { performance: { hints:'warning', //入口起点的最大体积 整数类型(以字节为单位) max ...

  3. PIE SDK加载自定义服务数据

    1.功能简介 自定义服务数据,将符合要求的矢量数据和栅格数据集等数据以服务的方式发布,将数据存储在某服务器中,在有网络的情况下可以根据URL就可以访问,比较常见的服务数据类型的有ArcGIS Serv ...

  4. element-ui 使用span-method表格合并后hover样式的处理

    在使用element表格合并后,发现鼠标只有移入第一个合并行时,合并的部分会高亮,移入其他行,不会高亮,这样效果看起来不是很好.查看了文档也没有直接的解决方法,就通过现有的方法处理了一下,解决了hov ...

  5. opencv-python 读入带有中文的图片路径

    windows 下读入带有中文的图片路径使用cv2.imread() 不能读入.使用如下代码可以. def cv_imread(filePath): cv_img = cv2.imdecode(np. ...

  6. dubbo序列化hibernate.LazyInitializationException could not initialize proxy - no Session懒加载异常的解决

    dubbo序列化,hibernate.LazyInitializationException could not initialize proxy - no Session懒加载异常的解决 转载声明: ...

  7. HTML5离线资源缓存简介

    cache manifest 示例 要使用离线资源缓存,开发者首先要提供一个 cache manifest 文件 它列出了所有需要在离线状态下使用的资源,浏览器会把这些资源缓存到本地 下面就是一个 c ...

  8. JavaScript技巧45招（转）

    原文:45 Useful JavaScript Tips, Tricks and Best Practices作者:Saad Mousliki 在这篇文章里,我将分享一些JavaScript的技巧.秘 ...

  9. hdu 3794 Magic Coupon

    浙大计算机研究生保研复试上机考试-2011年  贪心: 注意:输入输出用scanf  printf 可以加快速度,用cin WA #include<iostream> #include&l ...

  10. VMware Workstation 12激活码

    VMware Workstation 12 Pro key/注册码: VY1DU-2VXDH-08DVQ-PXZQZ-P2KV8 VF58R-28D9P-0882Z-5GX7G-NPUTF YG7XR ...