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. Canvas绘制线。

2. Canvas绘制形状。

1. Canvas绘制线。

2. 教学难点： Canvas绘制形状。

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

知识目标

能力目标

素质目标

1.掌握Canvas绘制线的使用。

2.掌握anvas绘制形状。

1.能够熟练应用Canvas进行线段的绘制。

2.能进行形状的绘制。

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

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

3. 培养团队合作能力。

课程思政——工匠精神

【 视频讲解】

知识储备及案例实现

1、不同颜色线宽的平行线的绘制

2、镂空正方形的绘制1

3、镂空正方形的绘制2

【 资料下载 】

单元设计

Canvas坐标与颜色定义

课程教案

Canvas坐标与颜色定义

演示文稿

Canvas坐标与颜色定义

任务工单

Canvas坐标与颜色定义

案例源码下载

1、绘制平行线

2、绘制镂空正方形

课内同步项目

 绘制三角形

课外扩展项目

 绘制填充的三角

练习题

 1、练习1

疑难问题解答

1、HTML5 Canvas使用教程。