<!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. OnClick和OnClientClick

    OnClientClick是客户端事件处理方法,一般采用JavaScript来进行处理,也就是直接在IE端运行,一点击就运行 OnClick是服务器端事件处理方法,在服务器端也就是IIS中运行,点击后 ...

  2. python学习-基础知识-1

    1.计算机历史 计算机使用高低电压的两种状态来描述信息.计算机可以理解的只有二进制数据即010100011....,1个比特位可以表示的状态只有2种,n个比特位可以表示的状态有2的n次方种. 所以如果 ...

  3. JSON中的坑

    坑一. 在使用localStorage时,我们会给一个key存取一个value,这个value可以是一个普通的字符串,也可以是一个对象,如果是一个字符串,我们就需要通过JSON.stringify来转 ...

  4. elasticsearch安装及与springboot2.x整合

    关于elasticsearch是什么.elasticsearch的原理及elasticsearch能干什么,就不多说了,主要记录下自己的一个使用过程. 1.安装 elasticsearch是用java ...

  5. wDatepicker97的用法（点击事件联动）

    1.在使用wdatepicker的时候用户需要选中然后联动其他的下拉,看了插件的文档,研究了一下 <input type="text" id="date" ...

  6. DIV+CSS常见面试题

    1.!important拥有最高的优先级,几乎所有浏览器都支持!important,除了IE6(不完全支持) 例1(IE6支持,颜色为#e00): .cssClass{color:#e00!impor ...

  7. WEB前端笔记

    HTML+CSS部分 IE6使用PNG的透明问题 解决关键字 DD_belatedPNG_0.0.8a.js Google或百度一下,下载之 <!--[if lte IE 6]> < ...

  8. IDE vscode识别webpack中alias配置路径

    引言网上看到一篇关于 ctrl+鼠标左键无法识别别名路径的问题,最后有人回复的方法只能在ts项目中可以识别 https://segmentfault.com/q/1010000011911879 最后 ...

  9. vs2013中$(TargetPath)与Link.OutputFile不同，导致调试debug找不到exe

    之前把VS2008项目升级为VS2013项目后,出现了VS2013调试debug找不到exe文件的现象,如:http://blog.sina.com.cn/s/blog_6c617ee301013xt ...

  10. 将forme表单转换为Json对象

    //将Form 表单转换为Json字符串 $.fn.serializeObject = function () { var o = {}; var a = this.serializeArray(); ...