Canvas 最早由Apple引入WebKit,用于Mac OS X 的 Dashboard,后来又在Safari和Google Chrome被实现。基于 Gecko 1.8的浏览器,比如 Firefox 1.5, 同样支持这个元素。  

      Canvas元素是WhatWG Web applications 1.0规范的一部分,也包含于HTML 5中。 

【 导学视频 】

学习任务

重点、难点

突破方法

1. 绘制图形。

2. 绘制文字。

3. 绘制图片。

4、绘制帧动画

1. 文字与图片的绘制。

2. 教学难点：帧动画的绘制。

采用翻转课堂、项目导入的教学模式，采用分组讨论、案例教学、演示动画等教学方法，运用在线教学平台。

知识目标

能力目标

素质目标

1.掌握Canvas绘制图形。

2.掌握Canvas绘制文字。

3.掌握Canvas进行帧动画的绘制。

1.能够应用Canvas进行形状的绘制。

2..能够应用Canvas进行文字与动画的绘制。

1. 养成积极主动学习意识；

2. 养成勤于动手的习惯；

3. 培养团队合作能力。

课程思政——工匠精神

【 视频讲解】

知识储备及案例实现

1、圆形的绘制

2、矩形的绘制

3、画布中心绘制文字1

4、画布中心绘制文字2

5、画布中心绘制文字3

6、画布中心绘制文字4

7、图片的绘制

8、帧动画的绘制1

9、帧动画的绘制2

10、帧动画的绘制3

【 资料下载 】

单元设计

Canvas绘制图形、图像与文字

课程教案

Canvas绘制图形、图像与文字

演示文稿

Canvas绘制图形、图像与文字

任务工单

Canvas绘制图形、图像与文字

案例源码下载

1、绘制原形

2、绘制矩形

3、绘制文本

4、绘制图片

5、绘制帧动画

课内同步项目

绘制在画布中心的一段文字

课外扩展项目

绘制动画

练习题

 1、练习1

疑难问题解答

1、Canvas使用小技巧。