6.8教案-绘画API.docx

《6.8教案-绘画API.docx》由会员分享，可在线阅读，更多相关《6.8教案-绘画API.docx（9页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、6.8教案-绘画APIYOUR LOGO原 创 文 档 请 勿 盗 版第6章 小程序API任务6.8 绘画API 课时内容界面API课时4教学目标（1）熟练掌握在画布中绘制图像功能的方法；（2）熟练掌握在画布中设置图像样式功能的方法；（3）熟练掌握在画布中设置图像变形以及剪裁的方法；（4）熟练掌握在画布中进行图片导出功能的方法。以下来分别介绍在画布中绘制图像、设置样式、变形、剪裁以及图片导出等的程序编写。教学重难点掌握绘制矩形的方法。掌握绘制五角星的方法掌握操作菜单的API函数wx.showActionSheet(Object object)掌握绘制渐变弧形的方法掌握绘制爱心的方法掌握绘制文本

2、的方法掌握绘制颜色透明的方法掌握绘制不同线条的方法掌握绘制渐变图形的方法掌握绘制图形阴影效果掌握自由绘图方法教学设计1.教学思路：本本任务主要介绍小程序绘画API的相关知识，通过animation属性来显示动画。动画效果的实现需要3个步骤,分别是创建动画实例；通过调用实例的方法来描述动画；通过动画实例的export()方法导出动画数据传递给组件的animation属性。通过小程序实战巩固基础知识。2.教学手段：多媒体+计算机3.教学资料：教材、多媒体课件教学内容一、任务描述本任务主要介绍小程序绘画API的相关知识，通过animation属性来显示动画。动画效果的实现需要3个步骤,分别是创建动画

3、实例；通过调用实例的方法来描述动画；通过动画实例的export()方法导出动画数据传递给组件的animation属性。本节的学习目标：（1）熟练掌握在画布中绘制图像功能的方法；（2）熟练掌握在画布中设置图像样式功能的方法；（3）熟练掌握在画布中设置图像变形以及剪裁的方法；（4）熟练掌握在画布中进行图片导出功能的方法。以下来分别介绍在画布中绘制图像、设置样式、变形、剪裁以及图片导出等的程序编写。二、导入新知1. 绘制矩形本任务用到了画布坐标系的相关知识、创建空白画布组件和创建画布上下文对象wx.createCanvasContext(canvasld) ，利用以上内容来创建绘制矩形图像。1. 变

4、脸谱游戏本任务用到了监听加速度变化事件的API函数wx.onAccelerometerChange(function callback)和消息提示框API函数wx.showToast(Object object)。2. 绘制五角星路径(Path)是绘制图形轮廓时画笔留下的轨迹，也可以理解为画笔画出的像素点组成的线条。多个点形成线段或曲线，不同的线段或曲线相连接又形成了各种形状效果。操作菜单3. 绘制渐变弧形 上一个任务是利用直线路径绘制五角星，除了直线路径外，小程序还可以使用画布对象的arc()方法绘制圆弧路径。4. 绘制爱心在小程序中绘制曲线的原理来自于贝塞尔曲线(Bezier Curve)

5、。5. 绘制文本小程序提供fillText()方法用于在画布上绘制实心文本内容，小程序提供setFontSize()方法用于设置字体大小，小程序提供setTextBaseline()方法用于设置文本的水平方向基准线，小程序提供setTextAlign()方法用于设置文本的对齐方式，在绘制之前也可使用画布上下文对象的font属性自定义字体风格。6. .设置颜色透明设置颜色透明度API函数setGlobalAlpha()，在创建空白画布组件上进行编写操作。小程序可使用setGlobalAlpha()生成半透明色作为画布上的图形轮廓或填充颜色下拉刷新7.绘制不同的线条用到了设置线条宽度setLine

6、Width()、设置线条端点样式setLineCap()、设置线条端点样式setLineJoin()和设置线条为虚线效果setLineDash()来实现各自的效果。8.绘制渐变图形在小程序中可以使用颜色渐变效果来设置图形的轮廓或填充颜色，分为线性渐变与圆形渐变两种。首先创建具有指定渐变区域的canvasGradient对象。9. 绘制图形阴影效果小程序使用setShadow()方法为画布中的图形或文本设置阴影效果。10. 自由绘图本任务主要使用了TouchEvent.changedTouches属性和canvas组件。三、 实现效果 （a）填充矩形 （b）描边矩形 （c）清空画布区域 图6.3

7、1 绘制矩形应用 （a）描边路径 （b）填充路径图6.32 绘制线段的应用图6.34 绘制渐变弧形 图6.36 曲线绘制爱心 图6.39 绘制文本应用 （a）不透明效果 （b）半透明效果 （c）全透明效果图6.40 颜色透明度的简单应用 （a）页面初始效果 （b）线条加粗效果 （c）圆形交点效果 （d）虚线效果图6.44 线条样式的应用 （a）线性渐变效果 （b）圆形渐变效果图6.45渐变样式的综合应用 （a）初始界面 （b）使用钢笔界面 （c）使用毛笔界面 （d）擦除界面图6.47 自由绘图的效果四、任务实现（1）编写index.wxml文件代码。（2）编写index.wxss文件代码。该文件定义了2个样式：map和.btnLayout。index.wxss代码见附件；（3） 编写index.js文件代码。练习