<!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. 经典C面试真题精讲

    第一章 灵魂--指针 101. p++ 请分析下述代码的输出结果 int main() { char* p1 = "China"; char* p2, * p3; p2 = (); ...

  2. V1-bug Alpha阶段项目展示

    V1-bug Alpha阶段项目展示 团队成员简介 Name Summary Sefie wxmwy V1-bug制造公司资深工程师精通各种抱大腿方式团队吉祥物 182 面面俱到流派一丝不苟 Powe ...

  3. 仔细说明CLOSE_WAIT状态的原因

    CLOSE_WAIT状态!!! 服务器收到客户端FIN报文后  服务器端口回复了ack,没有回复FIN报文. 1 说明客户端后面不会再向服务器发送用户层的数据了, 2 客户端 没有回复FIN 报文嘛 ...

  4. Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解

    简介 最近了解到很多网页开发者对jquery中的 .bind() .live() .delegate() 和 .on() 方法存在很多的疑惑.这些疑惑通常是关于它们之间真正的区别是什么啊,什么时候该使 ...

  5. Kubeadm and Kops

    Kubeadm是Kubernetes官方推出的快速部署Kubernetes的集群工具,其思路是将Kubernetes相关服务容器化以简化部署. With the release of kubeadm ...

  6. Kubernetes单机安装部署

    系统环境: Ubuntu 16.04.2 LTS 软件环境: Docker 1.12.6 Go 1.8.3 Etcd 3.1.8 Flannel 0.7.1 Kubernetes master 1.7 ...

  7. Python学习--猫眼电影TOP100榜单抓取

    import requests import re import json import time def get_one_page(url): headers={'User-Agent':'Mozi ...

  8. eclipse中springsource-tool-suite(sts)插件安装教程

    插件的下载参照:http://www.cnblogs.com/jepson6669/p/8540157.html 用过的eclipse不能安装成功,需要重新解压新的才能安装成功,不知道为什么? 解压上 ...

  9. JS原型与原型链（好文看三遍）

    一. 普通对象与函数对象 JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object ,Function 是JS自带的函数对象. 下面举例说明: function ...

  10. Python读取文件编码及内容

    Python读取文件编码及内容 最近做一个项目,需要读取文件内容,但是文件的编码方式有可能都不一样.有的使用GBK,有的使用UTF8.所以在不正确读取的时候会出现如下错误: UnicodeDecode ...