<!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. css提取数据2个常用方法

    提取标签里的内容 所谓数据就是HTML里标签的内容,如下面红色字体,就是标签内容 <title>我只是个实验 - SCRAPY</title> 提取标签里的数据,标签可以是ti ...

  2. VS中的DataPager分页

    微软的DataPager分页功能很强大,不要设置数据库存储过程,只要添加个DataPager控件,关联下要分页的控件,简单设置就可以有不错的分页效果.当然要有更理想的效果还是要前台和后台处理下. wi ...

  3. 各版本JDK官方下载地址

    https://www.oracle.com/technetwork/java/archive-139210.html linux下JDK下载方法wget --no-check-certificate ...

  4. ios 开发之旅

    你可能还在跟我一样傻傻的研究,怎么用visual studio 开发ios 里,哪就浪费时间吧!因为在安装 xmarin的时候,自动可以选择ios for Visual studio ,安装完也不能编 ...

  5. sencha touch list infinite 属性

    sencha touch list 1 默认每一项的高度会自动适应其内容. 2 当每一个 item 的高度都相同且不变时, 设置 itemHeight 为固定值 和 variableHeights 为 ...

  6. jedis入门教程

    1 jedis介绍 2 java连接Redis 1 导入jar包 2 连接实例 @Test //获得单一的jedis对象操作数据库 public void test1(){ //1.获得连接对象 设置 ...

  7. QQ游戏--捕鱼假日竞技港对抗岛自动刷贝壳辅助使用教程和下载地址

    首先解压缩到D盘根目录 再进入buyujiari文件夹双击 然后打开QQ游戏,进入竞技港-->对抗岛,到达开始准备的界面 再打开  辅助.exe 360对按键精灵的一个文件会提示病毒,可不用理会 ...

  8. java多线程开发之CyclicBarrier，CountDownLatch

    最近研究了一个别人的源码,其中用到多个线程并行操作一个文件,并且在所有线程全部结束后才进行主线程后面的处理. 其用到java.util.concurrent.CyclicBarrier 这个类. Cy ...

  9. unity鼠标拖动物体旋转

    using System.Collections; using System.Collections.Generic; using UnityEngine; /// <summary> / ...

  10. CountDownLatch同步工具--控制多个线程执行顺序

    好像倒计时计数器,调用CountDownLatch对象的countDown方法就将计数器减1,当到达0时,所有等待者就开始执行. java.util.concurrent.CountDownLatch ...