微信小程序开发 6.8教案-绘画API[8页]

admin管理员组

文章数量:1537942

2024年1月28日发(作者：)

第6章 小程序API

任务6.8 绘画API

课时内容

界面API

课时

4

教学目标

（1）熟练掌握在画布中绘制图像功能的方法；

（2）熟练掌握在画布中设置图像样式功能的方法；

（3）熟练掌握在画布中设置图像变形以及剪裁的方法；

（4）熟练掌握在画布中进行图片导出功能的方法。

以下来分别介绍在画布中绘制图像、设置样式、变形、剪裁以及图片导出等的程序编写。

掌握绘制矩形的方法。

掌握绘制五角星的方法掌握操作菜单的API函数tionSheet(Object object)

掌握绘制渐变弧形的方法

掌握绘制爱心的方法

掌握绘制文本的方法

教学重难点

掌握绘制颜色透明的方法

掌握绘制不同线条的方法

掌握绘制渐变图形的方法

掌握绘制图形阴影效果

掌握自由绘图方法

1.教学思路：本本任务主要介绍小程序绘画API的相关知识，通过animation属性来显示动画。动画效果的实现需要3个步骤,分别是创建动画实例；通过调用实例的方法来描述动画；通过动画实例的export()方法导出动画数据传递给组件的animation属性。通过小程序实战巩固基础知识。

2.教学手段：多媒体+计算机

3.教学资料：教材、多媒体课件

教学设计

教学内容

一、任务描述

本任务主要介绍小程序绘画API的相关知识，通过animation属性来显示动画。动画效果的实现需要3个步骤,分别是创建动画实例；通过调用实例的方法来描述动画；通过动画实例的export()方法导出动画数据传递给组件的animation属性。本节的学习目标：

（1）熟练掌握在画布中绘制图像功能的方法；

（2）熟练掌握在画布中设置图像样式功能的方法；

（3）熟练掌握在画布中设置图像变形以及剪裁的方法；

（4）熟练掌握在画布中进行图片导出功能的方法。

以下来分别介绍在画布中绘制图像、设置样式、变形、剪裁以及图片导出等的程序编写。

二、导入新知

1. 绘制矩形

本任务用到了画布坐标系的相关知识、创建空白画布组件和创建画布上下文对象CanvasContext(canvasld) ，利用以上内容来创建绘制矩形图像。

1. 变脸谱游戏

本任务用到了监听加速度变化事件的API函数lerometerChange(function callback)和消息提示框API函数ast(Object object)。

2. 绘制五角星

路径(Path)是绘制图形轮廓时画笔留下的轨迹，也可以理解为画笔画出的像素点组成的线条。多个点形成线段或曲线，不同的线段或曲线相连接又形成了各种形状效果。操作菜单

3. 绘制渐变弧形

上一个任务是利用直线路径绘制五角星，除了直线路径外，小程序还可以使用画布对象的arc()方法绘制圆弧路径。

4. 绘制爱心

在小程序中绘制曲线的原理来自于贝塞尔曲线(Bezier Curve)。

5. 绘制文本

小程序提供fillText()方法用于在画布上绘制实心文本内容，小程序提供setFontSize()方法用于设置字体大小，小程序提供setTextBaseline()方法用于设置文本的水平方向基准线，小程序提供setTextAlign()方法用于设置文本的对齐方式，在绘制之前也可使用画布上下文对象的font属性自定义字体风格。

6. .设置颜色透明

设置颜色透明度API函数setGlobalAlpha()，在创建空白画布组件上进行编写操作。小程序可使用setGlobalAlpha()生成半透明色作为画布上的图形轮廓或填充颜色下拉刷新

7.绘制不同的线条

用到了设置线条宽度setLineWidth()、设置线条端点样式setLineCap()、设置线条端点样式setLineJoin()和设置线条为虚线效果setLineDash()来实现各自的效果。

8.绘制渐变图形

在小程序中可以使用颜色渐变效果来设置图形的轮廓或填充颜色，分为线性渐变与圆形渐变两种。首先创建具有指定渐变区域的canvasGradient对象。

9. 绘制图形阴影效果

小程序使用setShadow()方法为画布中的图形或文本设置阴影效果。

10. 自由绘图

本任务主要使用了dTouches属性和canvas组件。

三、实现效果

图6.31 绘制矩形应用

（a）填充矩形 （b）描边矩形 （c）清空画布区域

（a）描边路径 （b）填充路径

图6.32 绘制线段的应用

图6.34 绘制渐变弧形

图6.36 曲线绘制爱心

图6.39 绘制文本应用

图6.40 颜色透明度的简单应用

（a）不透明效果 （b）半透明效果 （c）全透明效果

（a）页面初始效果 （b）线条加粗效果

（c）圆形交点效果 （d）虚线效果

图6.44 线条样式的应用

（a）线性渐变效果 （b）圆形渐变效果

图6.45渐变样式的综合应用

（a）初始界面 （b）使用钢笔界面

（c）使用毛笔界面 （d）擦除界面

图6.47 自由绘图的效果

四、任务实现

（1）编写文件代码。

（2）编写文件代码。该文件定义了2个样式：map和.btnLayout。代码见附件；

（3） 编写文件代码。

练习

本文标签： 绘制方法画布设置效果