web前端开发 知识点1 ：在canvas中使用图像 电子教案.docVIP

山东理工职业学院单元教学过程设计首页 课程所属院（部）：软件工程学院 2016--- 2017学年 第二学期 课程名称 《Web前端开发》 任课教师 单元标题 在canvas中使用图像 上课地点 8208微机室 学时 2 授课班级 授课时间 第 周 第 周 第 周 第 周 第 周 第 周 星期 星期 星期 星期 星期 星期 第 节 第 节 第 节 第 节 第 节 第 节 月 日 月 日 月 日 月 日 月 日 月 日 教学目标 能力目标 知识目标 1. 利用Canvas绘图drawimage()方法实现图像效果； 1. 在canvas中使用图像的方法drawimage()； 2. 绘图图像的步骤。 3. 图像的平铺和剪裁 教学任务 1. 学习使用图像方法drawimage()的基础知识，理解和掌握Canvas绘图图像的步骤和方法； 2. 能利用Canvas绘图drawimage()方法实现图像效果 教学重、难点 重点：canvas中使用图像的方法drawimage()的基础知识 难点：绘图图像的步骤和方法 教学材料或用具 教材、教案、课程标准、案例素材、DreamWeaver CS6软件及微机室 课后任务 网页制作软件对比 山东理工职业学院单元教学过程设计 步骤及时间 教学内容 教师活动 学生活动 5分钟 5分钟 20分钟 30分钟 25分钟 5分钟 【组织教学】 1、检查学生出勤，作好学生考勤记录。 2、课堂提问，了解学生掌握所学知识情况。 3、强调课堂纪律，加强互动，活跃课堂气氛。 【课题导入】 HTML4之前，用户不能在页面绘制图形，只能通过img元素引用并显示图形。HTML5新增了Canvas绘图元素，用户可以在页面绘制基本图形，还可以绘制简单的动画。 【讲授新课】 6.6 在canvas中使用图像 1．绘制图像 Canvas API可以读取本地或网络上的图像文件，然后将该图像绘制在画布中，这主要是通过drawImage()方法实现的。 （1）drawImage()方法 drawImage()方法由绘图上下文ctx调用，该方法定义有三种形式. ctx.drawImage(image,x,y); ctx.drawImage(image,x,y,w,h); ctx.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh); (2)ctx绘制图像的步骤 创建Image对象 使用不带参数的new 方法创建Image对象，然后在该Image对象的src属性中指定需要绘制的图像文件的路径，具体代码如下。 image=new Image(); image.src=“images/tu1.jpg”; //设置图像路径和文件名 在Image对象的onload事件中同步执行绘制图像的方法 创建Image对象后，就可以通过drawImage()方法绘制该图像文件了,代码如下: image.onload=function(){ //绘制图像 } (3)绘制图像的示例 示例6-19给出了在画布上绘制一个简单的图像 2．图像平铺 在HTML5中使用绘图上下文对象的createPattern()方法来实现平铺非常容易，createPattern方法的定义如下。 context.createPattern(image,type); 该方法需要定义2个参数，image参数为要平铺的图像，type参数必须取下面字符串值之一。 · no-repeat：不平铺 · repeat-x：横向平铺 · repeat-y：纵向平铺 · repeat：全方向平铺 示例6-20实现图片的重复填充，执行效果如图6-22所示。 3．图像裁剪 示例6-21实现了图像裁剪功能。 【任务总结】 1、学生完成的课堂任务总结。 2、本节课知识点提问。 【布置作业】 利用Canvas绘图绘制如下基本图形 组织教学 任务导入 课件演示 案例操作讲解 指出学习重点和难点 操作演示 仔细讲解制作此任务的每一个步骤 适当提问 对学生提出的问题给于指导 展示任务 细致操作每一个步骤，指出易错的具体操作步骤 巡回指导 配合教师组织教学 聆听互动 聆听 简单记录重要知识点、回答提问，观看并记忆各元素用法 记录并记忆 回答教师提出的疑问 记忆代码含义 上机实践操作任务、自主探究和小组协作 提出疑问 配合回答提问 利用课上剩余时间或课下时间完善任务