html5--5-16 综合实例绘制饼图

实例

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>无标题文档</title>

 </head>

 <body>

 </body>

 </html><!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style type="text/css">

         canvas{background: #A9A9A0}

     </style>

 </head>

 <body>

     <canvas id="mycanvas" width="800px" height="600">

         您的浏览器暂不支持HTML5的canvas元素！！

     </canvas>

     <script type="text/javascript">

         //定义变量获取画布DOM

         var canvas=document.getElementById("mycanvas");

         //设置绘画环境为2d

         var context=canvas.getContext("2d");

         context.shadowOffsetX=0;

         context.shadowOffsetY=4;

         context.shadowBlur=5;

         context.shadowColor="#DADA00"

         context.fillStyle="#FF0000";

         //1、绘制标题

         context.font="60px 隶书";

         context.fillText("绘制饼图",50,50);

         //2、绘制饼图的每一块

         //2.1、第一块，右下角

         context.beginPath();

         context.lineWidth=5;

         context.fillStyle="#FF00FF";

         context.moveTo(400,300);

         context.arc(400,300,160,0,Math.PI/3);

         context.fill();

         //文字

         context.fillStyle="#000000";

         context.font="20px 隶书";

         context.fillText("16.7%",480,350);

         //2.2、第二块，左下角

         context.beginPath();

         context.lineWidth=5;

         context.fillStyle="#F0F0F0";

         context.moveTo(400,300);

         context.arc(400,300,160,Math.PI/3,Math.PI);

         context.fill();

         //文字

         context.fillStyle="#000000";

         context.font="20px 隶书";

         context.fillText("33.3%",330,370);

         //2.3、第三块，左上角

         context.beginPath();

         context.lineWidth=5;

         context.fillStyle="#00F0F0";

         context.moveTo(400,300);

         context.arc(400,300,160,Math.PI,Math.PI*1.5);

         context.fill();

         //文字

         context.fillStyle="#000000";

         context.font="20px 隶书";

         context.fillText("25%",330,230);

         //2.4、第四块，右上角

         context.beginPath();

         context.lineWidth=5;

         context.fillStyle="#984567";

         context.moveTo(400,300);

         context.arc(400,300,160,Math.PI*1.5,Math.PI*2);

         context.fill();

         //文字

         context.fillStyle="#000000";

         context.font="20px 隶书";

         context.fillText("25%",460,230);

     </script>

 </body>

 </html>

学习要点

    通过综合练习回顾之前的内容

如果把Canvsas比作宫殿的话，我们目前学到的知识还只是隔着门缝往里面初窥，为什么不进去呢？因为我们还没有掌握大门的钥匙，而这个钥匙就是JavaScript脚本语言，我们会在第七章进行系统的学习，同时也会在后续课程中对Canvsas进一步讲解，而本章内容将以这个实例演示结束暂告一段落。同时如果对此有兴趣，请继续关注后续课程，会讲到动画和小游戏......

绘制阴影的方法

    1. shadowOffsetX 设置阴影的水平偏移距离
    2. shadowOffsetY 设置阴影垂直偏移距离
    3. shadowBlur 设置阴影的模糊系数
    4. shadowColor 设置阴影的颜色

渐变色绘制方法

    1. createLinearGradient() 创建线性渐变
      • createLinearGradient(x1,y1,x2,y2)---颜色渐变的起始坐标和终点坐标
      • addColorStop(位置,"颜色值")---0表示起点...插入点...1表示终点，配置颜色停止点
    2. createRadialGradient(x1,y1,r1,x2,y2,r2,) 创建放射状/环形的渐变
    3. ....

渐变色绘制方法

    1. createLinearGradient() 创建线性渐变
      • createLinearGradient(x1,y1,x2,y2)---颜色渐变的起始坐标和终点坐标
      • addColorStop(位置,"颜色值")---0表示起点...插入点...1表示终点，配置颜色停止点
    2. createRadialGradient(x1,y1,r1,x2,y2,r2,) 创建放射状/环形的渐变
    3. ....

文字的绘制方法

    1. strokeText("文字"，x,y,maxWith) 绘制（描边）空心文字
    2. fillText("文字"，x,y,maxWith) 绘制实心
    3. 字体样式：font="大小 字体 ..."

矩形的绘制方法

    1. rect(x,y,w,h)创建一个矩形
    2. strokeRect(x,y,w,hx,y,w,h) 绘制矩形（无填充）
    3. fillRect(x,y,w,h) 绘制"被填充"的矩形
    4. stroke() 绘制已定义的路径
    5. fill()绘制一个实心的（带填充的图形）

Canvas的路径方法

    1. moveTo() 定义绘制路径的起点(在直线中就是定义直线的起点)
    2. lineTo() 添加一个新点，(在我们的直线案例中就是定义直线的终点，但是后边继续绘制的话，它就变成中间点)
    3. stroke() 绘制已定义的路径
    4. fill()绘制一个实心的（带填充的图形）
    5. beginPath() 用来创建新的路径
    6. closePath() 从当前点回到起始点的来封闭路径
    7. arc(x,y,r,开始角度，结束角度，true/false) ：创建圆弧/曲线（用于创建圆形或部分圆）

绘制直线段流程:

    1. 在HTML5文档中添加canvas元素，并且设置的宽高和ID
    2. 在canvas元素中添加提示语句，让不支持canvas的浏览器能够显示友好的提示语句
    3. 添加script元素
    4. 获取画布/设置绘图绘图环境：此为固定语句，暂时记住、了解即可，后续课程还会继续讲解
      1. 指定线宽:lineWidth= 数值
      2. 指定颜色：strokeStyle=颜色值（只适用用轮廓，线段等，填充色用：fillStyle=颜色值
    5. 设定起点：moveTo(x坐标,y坐标)
    6. 设定终点：lineTo(x坐标,y坐标)
    7. 开始绘制：stroke()

绘制矩形流程：

    1. 在HTML5文档中添加canvas元素，并且设置的宽高和ID
    2. 在canvas元素中添加提示语句，让不支持canvas的浏览器能够显示友好的提示语句
    3. 添加script元素
    4. 获取画布/设置绘图绘图环境：此为固定语句，暂时记住、了解即可，后续课程还会继续讲解
      • 绘制空心矩形
        1. 指定线宽:lineWidth= 数值
        2. 指定轮廓颜色：strokeStyle=颜色值（只适用用轮廓，线段等，填充色用：fillStyle=颜色值
        3. 设定矩形的基本参数：strokeRect(x,y;width,height)
      • 绘制填充矩形
        1. 指定填充颜色：fillStyle=颜色值（只适用用轮廓，线段等，填充色用：fillStyle=颜色值
        2. 设定矩形的基本参数：fillRect(x,y;width,height)

绘制圆

  1. 在HTML5文档中添加canvas元素，并且设置的宽高和ID
  2. 在canvas元素中添加提示语句
  3. 添加script元素
  4. 获取画布/设置绘图绘图环境
  5. 指定线宽:lineWidth= 数值
  6. 指定颜色：fill/strokeStyle=颜色值（只适用用轮廓，线段等，填充色用：fillStyle=颜色值
  7. 设定圆的基本参数：
    • 圆心的坐标:x,y
    • 圆的半径：数值
    • 起始弧度和终止弧度：角度值1，角度值2
    • 绘制方向：true（逆时针）/false（顺时针）
  8. 开始绘制：stroke()/fill（）

html5--5-16 综合实例绘制饼图的更多相关文章

  1. HTML5 Canvas（实战：绘制饼图2 Tooltip）

    继上一篇HTML5 Canvas(实战:绘制饼图)之后,笔者研究了一下如何给饼图加鼠标停留时显示的提示框. Plot对象 在开始Coding之前,笔者能够想到的最easy的方式,就是给饼图的每一个区域 ...

  2. Html5绘制饼图统计图

    这里要介绍的是一个jQuery插件:jquery.easysector.js Html5提供了强大的绘图API,让我们能够使用javascript轻松绘制各种图形.本文将主要讲解使用HTML5绘制饼图 ...

  3. HTML5绘制饼图示例（一）

    原文地址:http://www.2cto.com/kf/201108/100251.html HTML5引入Canvas元素,用于图形的绘制,我们可以仅仅基于HTML和JavaScript就能绘制出原 ...

  4. Qt Quick综合实例之文件查看器

    假设你基于Qt SDK 5.3.1来创建一个Qt Quick App项目,项目模板为你准备的main.qml文档的根元素是ApplicationWindow或Window.这次我们就以Applicat ...

  5. 使用VS2012 开发SharePoint 2013 声明式的action(activity) 综合实例

    本文讲述使用VS2012 开发SharePoint 2013 声明式的action 综合实例. 需求同: http://blog.csdn.net/abrahamcheng/article/detai ...

  6. JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记3

    技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuer ...

  7. JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记2

    技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuer ...

  8. [原创]MongoDB综合实例一

    CentOS-6.5单机实现mongoDB分片 环境:1)CentOS 6.5系统      2)IP:本机3)MongoDB:MongoDB-linux-x86_64-2.6.1 实现:两个副本集s ...

  9. Qt之自绘制饼图

    1.说明 最近在搞绘图方面的工作,说实话C++的第三方绘图库并不算多,总之我了解的有:qtcharts.ChartDirector.qwt.kdchart和QCustomPlot.这几个库各有利弊. ...

随机推荐

  1. 邁向IT專家成功之路的三十則鐵律 鐵律十七：IT人休閒之道-清心

    現代人的休閒生活可說是兩類極端的表現,一類是整天待在家裡當個超級宅男宅女,假日走最遠的路就是附近三百公尺內的泡沫紅茶店.另一類則是抱著及時享樂心態的美女與型男,整天趴趴走把辛苦賺來的錢都拿去玩樂.美食 ...

  2. 【面试 IO】【第十一篇】 java IO

    1.什么是比特(Bit),什么是字节(Byte),什么是字符(Char),它们长度是多少,各有什么区别 1>Bit最小的二进制单位 ,是计算机的操作部分 取值0或者1 2>Byte是计算机 ...

  3. 托管和非托管转换新方法：Marshaling Library(zz) 【转】

    托管和非托管转换新方法:Marshaling Library(zz) 托管和非托管转换新方法:Marshaling Library(zz) http://hi.baidu.com/superql/bl ...

  4. 怎样在ubuntu 系统上为 php 加上 redis 扩展

    近期一个项目.,想用redis 作为数据库,php是不待redis 扩展,必须安装,怎么安装呢?我在网上找的非常多资料发现都是预编译的.但都没成功.于是就找了第二种方法是不须要编译直接安装就能够了. ...

  5. C++简单介绍

    一.怎样用C++的源文件产生一个可运行程序 一个C++程序由一个或者多个编译单元组成.每一个编译单元都是一个独立的源码文件.一般是一个带.cpp的文件,编译器每次编一个文件编译单元,生成一个以.obj ...

  6. ffmpeg 跟我学 视频教程

    最近一段时间找时间录制了一些Ffmpeg视频教程,还有录制完毕,会持续更新,内容会包含Ffmeg保存文件,网络流转发, 编码,解码,播放器制作,以及服务端搭建等等,适合初学者,有需要的朋友的可以关注: ...

  7. Git bare repo with multiple branches

    http://stackoverflow.com/questions/9324762/git-bare-repo-with-multiple-branches Q: I want to make a ...

  8. smali函数分析

    一.函数调用 smali中的函数和成员变量也分为两种,分别为 direct 和 virtual 两者的区别 1.direct method 是指private函数 2.virtual method 是 ...

  9. .Net Core表单验证

    验证 attributes: Attributes Input Type [EmailAddress] type=”email” [Url] type=”url” [HiddenInput] type ...

  10. 03 svn 权限与用户管理

    一:权限管理 (1)svn仓库各个作用 svnserve.conf [svn仓库的配置文件] password [svn仓库账号和密码配置文件] authz [svn仓库的访问权限] (2)访问权限 ...