Canvas(画布)
   基本内容
     简单来说,HTML5提供的新元素<canvas>
     Canvas在HTML页面提供画布的功能
       在画布中绘制各种图形
     Canvas绘制的图形与HTML页面无关
       无法通过DOM获取绘制的图形
       无法为绘制的图形绑定DOM事件
     只能使用Canvas提供的API
     Canvas用途
       在HTML页面中绘制图表(例如柱状图、饼状图等)
       网页游戏 - Flash技术
         使用HTML5中的Canvas
   如何使用Canvas
     在HTML页面中定义<canvas>元素
     在javascript代码中
       获取<canvas>元素
       创建画布对象
         getContext('2d')方法
       使用Canvas提供的API
   绘制图形
     绘制矩形
       fillRect(x,y,width,height) - 实心矩形
         x和y - 矩形的左上角坐标值
  width - 设置矩形的宽度
  height - 设置彗星的高度
       strokeRect(x,y,width,height) - 空心矩形
       clearRect(x,y,width,height)
         清除指定区域的矩形
     设置颜色
       fillStyle - 设置填充颜色
       strokeStyle - 设置描边颜色
       globalAlpha - 设置透明度(0-1)
     设置渐变
       线型渐变 - createLinearGradient(x1,y1,x2,y2)
         具有基准线 - 起点(x1,y1)和终点(x2,y2)
       扇形(射线)渐变 - createRadialGradient(x1,y1,r1,x2,y2,r2)
         具有柱形(锥形) - 两个圆的面积
  参数
    x1和y1 - 第一个圆的圆心坐标值
    r1 - 第一个圆的半径
    x2和y2 - 第二个圆的圆心坐标值
    r2 - 第二个圆的半径

绘制图形
     绘制文字
       方法
         fillText(text,x,y) - 实心文字
    text - 绘制的文字内容
    x和y - 绘制的坐标值
  strokeText(text,x,y) - 空心文字
       属性
         font - 类似于CSS中的font属性
  textAlign - 设置文字的水平方向对齐
    left - 左对齐
    center - 水平居中
    right - 右对齐
  textBaseline - 设置文字的垂直方向对齐
    top - 顶部对齐
    middle - (垂直)居中对齐
    bottom - 底部对齐
    hanging - 悬挂基线
    alphabetic - 字母基线
         注意
    无论是水平方向还是垂直方向对齐,基准线对齐,并不是文字对齐
    无论是水平方向还是垂直方向对齐,并不是必要的属性(不使用也是可以的)
     阴影效果
       shadowColor - 设置阴影颜色
       shadowOffsetX - 设置水平方向阴影
       shadowOffsetY - 设置垂直方向阴影
       shadowBlur - 设置阴影的模糊程度
     创建路径
       (标识)方法
         beginPath() - 表示开始创建路径
  closePath() - 表示结束创建路径
       设置方法
         rect(x,y,width,height) - 设置矩形形状
    x和y - 设置矩形的左上角坐标值
    width和height - 设置矩形的宽度和高度
  arc(x,y,radius,startAngle,endAngle,direction) - 设置圆形形状
    x和y - 设置圆形的圆心坐标值
    radius - 设置圆形的半径
    startAngle和endAngle - 设置圆形的起始位置
    direction - 按照顺时针或逆时针绘制
       绘制方法
         stroke() - 绘制轮廓
  fill() - 绘制填充
     绘制线条(直线和折线、多边形) - 创建路径
       moveTo(x,y) - 设置这条线的起点坐标值
       lineTo(x,y) - 设置这条线的终点(折点)坐标值
   设置线条
     lineWidth - 设置线条的宽度
       默认值为1(px)
     lineCap - 设置线条端点的形状
       butt - 默认值,平直
       round - 圆角
       square - 正方向
     lineJoin - 设置两条线焦点的形状
       miter - 默认值,尖角
       round - 圆角
       bevel - 斜角
     miterLimit - 配合lineJoin使用
       lineJoin设置为miter,该属性值设置尖角的延伸范围
  Canvas处理图片
   绘制图片
     drawImage(img,x,y) - 按照图片原大小加载
       img - 当前加载(绘制)的图片
       x和y - 绘制图片的坐标值(左上角)
     drawImage(img,x,y,width,height) - 按照指定大小加载图片
       img - 当前加载(绘制)的图片
       x和y - 绘制图片的坐标值(左上角)
       width和height - 设置绘制图片显示的宽度和高度
     注意
       必须保证图片加载完毕(onload事件)后,再绘制图片
   平铺图片
     createPattern(img,type)
       img - 平铺的图片
       type - 平铺的方式
         repeat - 平铺
  no-repeat - 不平铺
  repeat-x - 水平方向平铺
  repeat-y - 垂直方向平铺
     注意
       必须保证图片加载完毕(onload事件)后,再绘制图片
   切割图片
     clip() - 切割(按照创建路径使用)
   画布方法
     scale(x,y) - 缩放(缩小或放大)
       x - 表示水平方向的缩放
       y - 表示垂直方向的缩放
       参数的取值
         如果为1的话,表示不缩放(原大小)
  如果小于1的话,表示缩小
  如果大于1的话,表示放大
     translate(x,y) - 重新定位(x,y)
       x和y - 新的坐标值
       注意 - x和y是相对于上次定位坐标值
     rotate(旋转角度) - 旋转画布
       公式为 degrees Math.PI / 180;
  Chart.js - Canvas的JS库
   作用 - 提供各种图表
   如何使用
     在HTML页面中引入Chart.js文件
     在HTML页面中定义<canvas>元素
     在javascript代码中
       获取<canvas>元素
       创建画布对象
         var context = canvas.getContext("2d");
       通过画布对象,创建Chart对象
         var chart = new Chart(context);
       利用Chart对象调用API方法
         var data = [];
  chart.Pie(data);
   提供6种图表
     柱状图 - Bar(data,options)
     饼状图 - Pie(data,options)
     曲线图 - Line(data,options)
     环形图 - Doughnut(data,options)
     雷达图 - Radar(data,options)

极地区域图 - PolarArea(data,options)

H5小内容(三)的更多相关文章

  1. 从零开始开发一款H5小游戏(三) 攻守阵营,赋予粒子新的生命

    本系列文章对应游戏代码已开源 Sinuous game. 每个游戏都会包含场景和角色.要实现一个游戏角色,就要清楚角色在场景中的位置,以及它的运动规律,并能通过数学表达式表现出来. 场景坐标 canv ...

  2. H5小内容(四)

    SVG   基本内容     SVG并不属于HTML5专有内容       HTML5提供有关SVG原生的内容     在HTML5出现之前,就有SVG内容     SVG,简单来说就是矢量图     ...

  3. H5小内容(一)

    HTML5目前最新的规范(标准)是2014年10月推出   2005年左右出现HTML5版本(非标准)     W3C组织(两个组织定义H5规范)   学习(研究)HTML5是学习未来(将来主流)   ...

  4. H5小内容(六)

    Web Worker   基本内容     单线程与多线程       Worker可以模拟多线程的效果     定义 - 运行在后台的javascript     注意 - 不能使用DOM      ...

  5. H5小内容(五)

    Geolocation(地理定位)   基本内容     地理定位 - 地球的经度和纬度的相交点     实现地理定位的方式       GPS - 美国的,依靠卫星定位       北斗定位 - 纯 ...

  6. H5小内容(二)

    音视频处理   视频处理     基本内容       使用Flash技术处理HTML页面中的视频内容         包含音频.动画.网页游戏等  特点    浏览器原生不支持(IE浏览器要求安装A ...

  7. 从零开始开发一款H5小游戏(二) 创造游戏世界,启动发条

    本系列文章对应游戏代码已开源 Sinuous game 上一节介绍了canvas的基础用法,了解了游戏开发所要用到的API.这篇文章开始,我将介绍怎么运用这些API来完成各种各样的游戏效果.这个过程更 ...

  8. Egret白鹭H5小游戏开发入门(三)

    前言: 在上一篇文章中着重介绍了H5小游戏开发的起步阶段,如Wing面板的使用,素材的处理,类的说明等等,那么今天主要是涉及到场景的创建,loading的修改等等的代码编写. 对于这一节,我在讲解的过 ...

  9. 基于uniapp自定义Navbar+Tabbar组件「兼容H5+小程序+App端Nvue」

    uni-app跨端自定义navbar+tabbar组件|沉浸式导航条|仿咸鱼凸起标签栏 在跨端项目开发中,uniapp是个不错的框架.采用vue.js和小程序语法结构,使得入门开发更容易.拥有非常丰富 ...

随机推荐

  1. 最新版postgresql+pgboucer安装

    安装postgresql: wget https://pgbouncer.github.io/downloads/files/1.7.2/pgbouncer-1.7.2.tar.gz wget htt ...

  2. Shiro 源码分析

    http://my.oschina.net/huangyong/blog/215153 Shiro 是一个非常优秀的开源项目,源码非常值得学习与研究. 我想尝试做一次 不一样 的源码分析:源码分析不再 ...

  3. 把DataTable 转换成Json格式,适用于EasyUI 绑定DataGrid

    本文转载:http://www.cnblogs.com/liang--liang/archive/2013/02/05/2893030.html public static string DataTa ...

  4. 横竖屏事件响应(viewWillLayoutSubviews和通知)两种方式

    转载:http://blog.csdn.net/nogodoss/article/details/17246489 最近搞横竖屏,获得一些心得,特记录下来. 做横竖屏最重要的是确定横竖屏响应的接口.目 ...

  5. 2014上海全国邀请赛题解 HDOJ 5090-5099

    HDOJ 5090 水题.从小到大排序,能够填充达到符合条件的.先填充好.填充之后进行调整. 传送门:pid=5090">点击打开链接 #include <cstdio> ...

  6. Android 颜色渲染(六) RadialGradient 环形渲染

    Android 颜色处理(六) RadialGradient 环形渲染 public RadialGradient(float x, float y, float radius, int[] colo ...

  7. java list&lt;string&gt;组 传递到值js排列

    方法一 后台:     String sql = "select * from tree";     list = this.treeService.getTreeList(sql ...

  8. HD1285(拓扑排序)

    package cn.hncu.dataStruct.search.topSort; import java.util.Scanner; public class Hdu1285 { static S ...

  9. Android 自定义View修炼-仿QQ5.0 的侧滑菜单效果的实现

    有一段时间没有写博客了,最近比较忙,没什么时间写,刚好今天有点时间, 我就分享下,侧滑菜单的实现原理,一般android侧滑的实现原理和步骤如下:(源码下载在下面最后给出哈) 1.使用ViewGrou ...

  10. iOS之在内存中绘图

    与直接在UIView控件上绘图不同,在内存中绘图时,需要开发者自己准备绘图环境,Quartz 2D提供了一个非常便捷的函数:UIGraphicsBeginImageContext(CGSize siz ...