课程简介
这门课会讲什么？
课程以HTML5 Canvas开发为抓手，主要介绍图形、文本、图像、视频、音频和动画等多媒体基础内容，通过课程不仅可了解多媒体的历史和发展，还将掌握文本的应用，图形图像的应用，音频和视频的播放控制，以及动画制作，课程的最后将安排综合应用多媒体知识的课程设计，通过一学期的学习后，学生将具备利用HTML5开发基于Canvas的多媒体作品的基本能力。
你将收获什么？
通过本课程的学习，可以使学生了解多媒体信息表示和处理的基本原理掌握多媒体数据基本的获取、传输存储、处理、合成与展现过程以及操作方法理解多媒体应用系统设计原理，能够使用多媒体工具进行设计与开发。
适合什么人学习？
1）计算机专业在校大学生；
2）感兴趣的社会学习者。
课程大纲
课程章节
- 第一单元 课程介绍
- 第二单元 Canvas开发基础
- 第三单元 图形绘制
- 第四单元 文本绘制
- 第五单元 图像处理
- 第六单元 音频和视频的控制
- 第七单元 动画制作
- 第八单元 优秀课程设计展示
第一单元 课程介绍
1.1 课程目标和大纲
1.2 课程进度表
1.3 课程教材和参考文献
1.4 上课形式
1.5 课程考核
1.6 上课要求
1.7 H5小游戏作品代表
1.8 多媒体课件作品代表
1.9 动画作品代表
1.10 交互媒体作品代表
第二单元 Canvas开发基础
2.1 多媒体技术概述
2.2 开发环境安装介绍
2.3 HTML简介
2.4 JavaScript基础语法
2.5 JavaScript函数和对象
2.6 JavaScript事件
2.7 JavaScript定时器方法
2.8 JavaScript错误调试
2.9 Canvas元素介绍
2.10 Canvas常用属性和方法
2.11 2D绘图环境的常用属性
2.12 与2D绘图环境相关的存储与恢复
2.13 时钟程序实现
2.14 浏览器对HTML5 Canvas的支持情况
2.15 彩色气泡案例
第三单元 图形绘制
3.1 图形基础理论
3.2 坐标系统
3.3 矩形绘制
3.4 圆形绘制
3.5 颜色和透明度
3.6 渐变和图案
3.7 阴影绘制
3.8 路径、描边和填充
3.9 坐标变换
3.10 剪辑区域
3.11 图形绘制的综合案例
3.12 绘制直线的实验指导
第四单元 文本绘制
4.1 文本的描边与填充
4.2 设置字型属性
4.3 字体大小和位置
4.4 文本绘制方法实验指导
4.5 数值仪表盘案例
4.6 绕圆弧文本案例
第五单元 图像处理
5.1 图像基础理论
5.2 drawImage方法绘制图像
5.3 离屏canvas
5.4 图像缩放控制
5.5 操作图像的像素
5.6 图像裁剪操作
5.7 图像特效处理
5.8 图像绘制方法比较
5.9 橡皮框选取图像案例
5.10 图像绘制的综合案例
第六单元 音频和视频的控制
6.1 视频基础理论
6.2 视频播放控制
6.3 Canvas上连续绘制视频帧
6.4 音频基础理论
6.5 音频播放控制
第七单元 动画制作
7.1 动画基础理论
7.2 requestAnimationFrame方法实现动画
7.3 requestAnimationFrame方法的polyFill方式实现
7.4 不同帧速率执行
7.5 视差动画
7.6 恢复动画背景
7.7 精灵和精灵的构造
7.8 精灵绘制器
7.9 精灵对象的行为
7.10 精灵动画制作器
7.11 动画制作的最佳指导原则
第八单元 优秀课程设计展示
8.1 2017级部分优秀设计
8.2 2016级部分优秀设计
8.3 2015级部分优秀设计
8.4 2014级部分优秀设计
