共 107 小节 已有 46385 人学过 2018.5.4 推出
Canvas元素与SVG元素是HTML5的一部分,它们都能为WEB带来丰富多彩的图形应用，比如游戏，各种图表，教学工具(绘图板)。为了制作出这些动人的效果，我们需要学习并掌握位图(canvas)编程与矢量图(SVG)编程技术,本套课程本着原生开发的准则，为大家提示各种图形背后的奥秘，以循序渐进的方式为大家深入浅出讲解图形背后的思路以及绘制流程，让大家能轻松地掌握各种IT编程技术，并可以快速地转向动手实践阶段。说明一下，本课程只需要你有至少一门编程语言的基础就可以，尤其适合前端开发人员进行学习，同时如果你是在校大学生，如果对图形开发感兴趣，并懂一些编程知识，那么本课程也会非常适合你。
- 第一章：Canvas路径运用及图形操作
1-1 认识HTML5图形开发
1-2 创建画布canvas，获取画笔
1-3 认识坐标系
1-4 绘制直线，矩形，多边形
1-5 图形的描边与填充
1-6 矩形的快捷绘制
1-7 新路径，掌握beginPath方法的使用
1-8 其它绘制属性(lineCap,lineJoin)的使用
1-9 路径-圆弧, 圆弧(arc)方法的使用
1-10 绘制属性globalAlpha的使用
1-11 绘制笑脸-基础路径的使用
1-12 绘制月亮
1-13 绘制折线图(1)
1-14 绘制折线图(2)
- 第二章：理解并掌握Canvas图形变换
2-1 基本变换-位移(translate)
2-2 基本变换-旋转(rotate)
2-3 基本变换-缩放(scale)
2-4 求两点间距离
2-5 认识基本三角函数(sin, cos, atan2)
2-6 认识矩阵(变换的原理)1 - 选学
2-7 认识矩阵(变换的原理)2 - 选学
2-8 三种基本变换的叠加,变换顺序对图形的影响-1
2-9 三种基本变换的叠加,变换顺序对图形的影响-2
2-10 变换与绘制样式的保存与恢复1
2-11 变换与绘制样式的保存与恢复2
2-12 实例1-绘制五角星（1）
2-13 实例1-绘制五角星（2）
2-14 实例2-绘制虚线（1）
2-15 实例2-绘制虚线（2）
2-16 实例3-绘制五星红旗
- 第三章： canvas图形动画
3-1 认识动画
3-2 普通div的动画
3-3 canvas动画-1(clearRect使用)
3-4 canvas动画-2(requestAnimationFrame使用)
3-5 匀速运动(速度始终如一)
3-6 缓冲运动(越来越慢)
3-7 弹性运动(感觉像弹簧运动)
3-8 运动分解(平抛运动)
3-9 小球在空间内的自由运动(运动范围限定)
3-10 实例-带影子的物体运动
- 第四章：与canvas图形发生交互
4-1 判断点是否在一个矩形范围内
4-2 选项卡(pointInPath使用)
4-3 圆形图形的事件获取
4-4 矩形图形的拖动
4-5 矩形与矩形之间的碰撞测验-1
4-6 矩形与矩形之间的碰撞测验-2
4-7 圆形与圆形之间的碰撞测验-1
4-8 圆形与圆形之间的碰撞测验-2
4-9 实例-烟花1
4-10 实例-烟花2
4-11 实例-烟花3
4-12 实例-别踩白块儿开发1
4-13 实例-别踩白块儿开发2
4-14 实例-别踩白块儿开发3
- 第五章：canvas位图图像
5-1 canvas绘制位图(初看drawimage)
5-2 绘制位图drawImage方法详解
5-3 实例-行走中的英雄1
5-4 实例-行走中的英雄2
5-5 实例-子弹打中物体后的爆炸效果1
5-6 实例-子弹打中物体后的暴炸效果2
5-7 实例-子弹打中物体后的暴炸效果3
5-8 实例-合成优美的风景图-图片预加载1
5-9 实例-合成优美的风景图-图片预加载2
- 第六章:：canvas像素操作
6-1 认识图像像素(图像像素组成了一维数组)
6-2 像素提取(getImageData方法使用)
6-3 操作像素改变图像(putImageData使用)1
6-4 操作像素改变图像(putImageData使用)2
6-5 绘制文字(font, fillText,strokeText)
6-6 绘制文字(自定义字体)
6-7 按图像行列定位像素数据的位置
6-8 图形算法-图像转黑白
6-9 图形算法-模糊效果
6-10 像素文字(文字像素块)
6-11 像素文字(打散)
6-12 像素文字(复原)
- 第七章：canvas绘制高级
7-1 线性渐变的绘制
7-2 径向渐变的绘制
7-3 canvas内置的渐变样式
7-4 掌握图形裁剪(clip方法应用)
7-5 给图形填充图案
7-6 路径的方向-基础
7-7 路径的方向-实战
7-8 设置canvas宽高的正确方式(对比CSS设置宽高)
7-9 刮刮乐-像素操作透明度通道
7-10 图片在矩形容器内的自适应
7-11 给合同签字
7-12 绘制柱状图
7-13 绘制饼状图
7-14 绘制热区图
- 第八章：SVG矢量图
8-1 认识SVG矢量图
8-2 svg基本图形
8-3 与svg图形进行交互
8-4 g标签的使用
8-5 详解transform属性
8-6 svg图形拖拽(拖动椅子)
8-7 svg图形标签transform属性小例子
8-8 重复使用svg图形(defs标签使用)
8-9 SVG钟表
8-10 svg渐变-linearGradient
8-11 svg渐变-radialGradient
8-12 path详解1-多边形(line,rect,polygon)
8-13 path详解2-弧或圆
8-14 绘制放大镜(path应用)
8-15 实例1绘制折线图
8-16 实例2绘制饼状图
8-17 实例3绘制饼状图(添加事件交互)
8-18 课程总结
Canvas元素与SVG元素是HTML5的一部分,它们都能为WEB带来丰富多彩的图形应用，比如游戏，各种图表，教学工具(绘图板)。为了制作出这些动人的效果，我们需要学习并掌握位图(canvas)编程与矢量图(SVG)编程技术,本套课程本着原生开发的准则，为大家提示各种图形背后的奥秘，以循序渐进的方式为大家深入浅出讲解图形背后的思路以及绘制流程，让大家能轻松地掌握各种IT编程技术，并可以快速地转向动手实践阶段。说明一下，本课程只需要你有至少一门编程语言的基础就可以，尤其适合前端开发人员进行学习，同时如果你是在校大学生，如果对图形开发感兴趣，并懂一些编程知识，那么本课程也会非常适合你。
