web前端开发 知识点2：绘制文字 电子教案.docVIP

山东理工职业学院单元教学过程设计首页 课程所属院（部）：软件工程学院 2016--- 2017学年 第二学期 课程名称 《Web前端开发》 任课教师 单元标题 在canvas中绘制文字 上课地点 8208微机室 学时 2 授课班级 授课时间 第 周 第 周 第 周 第 周 第 周 第 周 星期 星期 星期 星期 星期 星期 第 节 第 节 第 节 第 节 第 节 第 节 月 日 月 日 月 日 月 日 月 日 月 日 教学目标 能力目标 知识目标 1.使用filltext()方法或strokeText()方法绘制文本效果； 1. filltext()方法和strokeText()方法绘制文本的格式； 2. 在canvas中使用filltext()方法或strokeText()方法绘制文本的步骤； 教学任务 1. 学习filltext()方法和strokeText()方法绘制文本的格式； 2. 在canvas中使用filltext()方法或strokeText()方法绘制文本的步骤。 教学重、难点 重点：filltext()方法和strokeText()方法绘制文本的格式 难点：使用filltext()方法或strokeText()方法绘制文本的步骤 教学材料或用具 教材、教案、课程标准、案例素材、DreamWeaver CS6软件及微机室 课后任务 网页制作软件对比 山东理工职业学院单元教学过程设计 步骤及时间 教学内容 教师活动 学生活动 5分钟 5分钟 20分钟 30分钟 25分钟 5分钟 【组织教学】 1、检查学生出勤，作好学生考勤记录。 2、课堂提问，了解学生掌握所学知识情况。 3、强调课堂纪律，加强互动，活跃课堂气氛。 【课题导入】 HTML4之前，用户不能在页面绘制图形，只能通过img元素引用并显示图形。HTML5新增了Canvas绘图元素，用户可以在页面绘制基本图形，还可以绘制简单的动画。 【讲授新课】 6.7 绘制文字 1．绘制文字的方法 绘制文字时可以主要使用filltext()方法或strokeText()方法。fillText()方法用填充方式绘制文本，strokeText()方法用轮廓方式绘制文本，这两个方法的格式定义如下。 void fillText(text,x,y,[maxwidth]); void strokeText(text,x,y,[maxwidth]); 2. 绘制文字的属性 使用canvas API绘制文字，可以设置有关文字绘制的属性。 示例6-22分别绘制实心文字、空心文字和图片填充文字。 !DOCTYPE html html head meta charset=UTF-8 title/title /head script function draw(id){ var canvas=document.getElementById(id); var ctx=canvas.getContext(2d); ctx.font=60px Arial bold; ctx.fillText(CANVAS TEXT,10,50); ctx.strokeText(CANVAS TEXT,10,120); image = new Image(); image.src = images/bg.jpg; image.onload=function() { //创建填充样式，全方向平铺 var ptn=ctx.createPattern(image,repeat); //指定填充样式，并填充文本 ctx.fillStyle=ptn; ctx.fillText(CANVAS TEXT,10,190); } } /script body onload=draw(myCanvas); canvas id=myCanvas width=400 height=300 你的浏览器不支持Canvas /canvas /body /html 6.8 使用canvas绘制动画 1、绘制动画的步骤 在canvas画布中绘制动画实际上就是一个图形不断绘制、擦除、重绘的过程，具体步骤如下。 （1）编写绘图方法 （2）使用setInterval()方法设置画面重绘的间隔时间