导语

  

内容提要

  

    莫振杰著的《HTML5Canvas开发详解(Web前端开发精品课)》结合笔者在前后端大量开发工作中的实战经验，系统化知识，浓缩精华，用通俗易懂的语言直击学习者的痛点。学习本书，可以让你掌握所有CanvasAPI、大部分动画技术以及各种高级开发技巧，真正获得一个稀有技能！
    全书共分为两大部分，第一部分是Canvas基础内容，主要介绍Canvas API语法，其中包括图形绘制、线条操作、文本操作、图片操作、变形操作、像素操作等各种基础API语法：第二部分是Canvas进阶内容，主要介绍Canvas动画开发，包括事件操作、物理动画、边界检测、碰撞检测、高级动画等各种稀有技巧。
    除了知识的讲解，教程还融入了大量的开发案例，并且更加注重实战编程思维的培养，为学习者提供一个流畅的学习思路。

第一部分  Canvas基础
第1章  Canvas概述
  1.1 Canvas简介
    1.1.1 Canvas是什么
    1.1.2 Canvas与SVG
  1.2 Canvas元素知识
    1.2.1 Canvas元素
    1.2.2 Canvas对象
第2章  直线图形
  2.1 直线图形简介
  2.2 直线
    2.2.1 Canvas坐标系
    2.2.2 直线的绘制
  2.3 矩形
    2.3.1 “描边”矩形
    2.3.2 “填充”矩形
    2.3.3 rect()方法
    2.3.4 清空矩形
  2.4 多边形
    2.4.1 Canvas绘制箭头
    2.4.2 Canvas绘制正多边形
    2.4.3 五角星
  2.5 训练题：绘制调色板
第3章  曲线图形
  3.1 曲线图形简介
  3.2 圆形简介
    3.2.1 圆形
    3.2.2 “描边”圆
    3.2.3 “填充”圆
  3.3 弧线
    3.3.1 arc()画弧线
    3.3.2 arcTo()画弧线
  3.4 二次贝塞尔曲线
  3.5 三次贝塞尔曲线
  3.6 训练题：绘制扇形
第4章  线条操作
  4.1 线条操作
  4.2 lineWidth属性
  4.3 lineCap属性
  4.4 lineJoin属性
  4.5 setLineDash()方法
第5章  文本操作
  5.1 文本操作简介
  5.2 文本操作“方法”
    5.2.1 strokeText()方法
    5.2.2 fillText()方法
    5.2.3 measureText()方法
  5.3 文本操作“属性”
    5.3.1 font属性
    5.3.2 textAlign属性
    5.3.3 textBaseline属性
第6章  图片操作
  6.1 图片操作简介
  6.2 绘制图片
    6.2.1 drawImage(image,dx,dy)
    6.2.2 drawImage(image,dx,dydw,dh)
    6.2.3 drawImage(image,sx,sysw,sh,dx,dy,dw,dh)
  6.3 平铺图片
  6.4 切割图片
  6.5 深入图片操作
第7章  变形操作
  7.1 变形操作简介
  7.2 图形平移
    7.2.1 translate()方法
    7.2.2 clearRect()方法清空Canvas
  7.3 图形缩放
    7.3.1 scale()方法
    7.3.2 scale()方法的负作用
  7.4 图形旋转
    7.4.1 rotate()方法
    7.4.2 改变旋转中心
  7.5 变换矩阵
    7.5.1 transform()方法
    7.5.2 setTransform()方法
  7.6 深入变形操作
  7.7 训练题：绘制绚丽的图形
  7.8 训练题：绘制彩虹
第8章  像素操作
  8.1 像素操作简介
    8.1.1 getImageData()方法
    8.1.2 putImageData()方法
  8.2 反转效果
  8.3 黑白效果
  8.4 亮度效果
  8.5 复古效果
  8.6 红色蒙版
    8.7 透明处理
    8.8 createImageData()方法
第9章  渐变与阴影
  9.1 线性渐变
  9.2 径向渐变
  9.3 阴影
第10章  Canvas路径
  10.1 路径简介
  10.2 beginPath()方法和closePath()方法
    10.2.1 beginPath()方法
    10.2.2 closePath()方法
  10.3 isPointInPath()方法
第11章  Canvas状态
  11.1 状态简介
  11.2 clip()方法
  11.3 save()方法和restore()方法
    11.3.1 图形或图片剪切
    11.3.2 图形或图片变形
    11.3.3 状态属性的改变
第12章  其他应用
  12.1 Canvas对象
    12.1.1 Canvas对象属性
    12.1.2 Canvas对象方法
  12.2 globalAlpha属性
  12.3 globalComposite属性
  12.4 stroke()和fill()
第二部分  Canvas进阶
第13章  事件操作
  13.1 Canvas动画简介
  13.2 鼠标事件
    13.2.1 什么是鼠标事件
    13.2.2 获取鼠标位置
  13.3 键盘事件
    13.3.1 什么是键盘事件
    13.3.2 获取物体移动方向
  13.4 循环事件
第14章  物理动画
  14.1 物理动画简介
  14.2 三角函数简介
    14.2.1 什么是三角函数
    14.2.2 Math-atan()与atan2()
  14.3 三角函数应用
    14.3.1 两点间的距离
    14.3.2 圆周运动
    14.3.3 波形运动
  14.4 匀速运动
    14.4.1 什么是匀速运动
    14.4.2 速度的合成和分解
  14.5 加速运动
    14.5.1 什么是加速运动
    14.5.2 加速度的合成和分解
  14.6 重力
    14.6.1 什么是重力
    14.6.2 重力的应用
  14.7 摩擦力
第15章  边界检测
  15.1 边界检测简介
  15.2 边界限制
  15.3 边界环绕
  15.4 边界生成
  15.5 边界反弹
第16章  碰撞检测
  16.1 碰撞检测简介
  16.2 外接矩形判定法
  16.3 外接圆判定法
  16.4 多物体碰撞
    16.4.1 排列组合
    16.4.2 多物体碰撞
第17章  用户交互
  17.1 用户交互简介
  17.2 捕获物体
    17.2.1 什么是捕获物体
    17.2.2 捕获静止物体
    17.2.3 捕获运动物体
  17.3 拖拽物体
  17.4 抛掷物体
第18章  高级动画
  18.1 高级动画简介
  18.2 缓动动画简介
  18.3 缓动动画应用
  18.4 弹性动画简介
  18.5 弹性动画应用
第19章  Canvas游戏开发
  19.1 Canvas游戏开发简介
  19.2 Box2D简介
    19.2.1 Box2D
    19.2.2 Box2DWeb
  19.3 HTML5游戏引擎
第20章  Canvas图表库
  20.1 Canvas图表库简介
  20.2 ECharts和HightCharts