项目10 设计实现模拟时钟.pptxVIP

项目10设计实现模拟时钟知识目标： ?学习微信小程序中的绘图canvas组件基础知识。

?掌握使用canvas组件提供的基本方法完成图像绘制。 ?掌握canvas组件提供的API对象的功能。技能目标： ?通过实现模拟时钟掌握canvas的用法。 ?熟悉canvas的API对象的使用。 ?通过项目实现掌握项目分析的方法以及canvas的用法。

素质目标： ?体验公正公平,优化用户交互。 ?强化隐私保护,维护网络权益。 ?推动技术创新,促进社会进步。 ?丰富文化内容,满足精神需求。 ?加强思政教育,提升政治素养。项目10设计实现模拟时钟

10.1知识准备10.2项目实施拓展训练

10.1知识准备

10.1.1canvas组件1.组件介绍canvas（画布）组件是小程序中的原生组件。默认宽度300px?225。同一页面中，canvas-id是唯一标识符，如果该标识符重复则canvas标签对应的画布将被隐藏无法正常工作。下表10-1列出canvas的常用属性。表10-1canvas常用属性属性类型说明typestring指定canvas类型idstringcanvas唯一标识符，若指定了type则无需再指定该属性disable-scrollboolean当在canvas中移动时且有绑定手势事件时，禁止屏幕滚动以及下拉刷新bindtouchstarteventhandle手指触摸动作开始bindtouchmoveeventhandle手指触摸后移动bindtouchendeventhandle手指触摸动作结束bindtouchcanceleventhandle手指触摸动作被打断，例如弹窗、来电提醒等bindlongtapeventhandle手指长按500ms之后触发，触发了长按事件后进行移动不会触发屏幕的滚动binderroreventhandle当发生错误时触发error事件，detail={errMsg}

10.1.1canvas组件2.使用canvas绘制图形使用canvas绘图是在js中通过对canvas的控制来绘制图形的。接下来通过举例说明如何在canvas中进行基本的图形绘制，以绘制矩形为例。打开pages/index/index.js文件，在onReady()函数中添加如下代码：//index.jsPage({onReady:function(){//1.获取canvas对象和渲染上下文wx.createSelectorQuery()//wxml中画布组件的id.select(#myCanvas).fields({node:true,size:true})//2.执行回调函数，将画布中的请求结果按照请求次序够成数组.exec((res)={//3.创建画布对象constcanvas=res[0].node//4.创建画布上下文constctx=canvas.getContext(2d)//5.获取系统同步信息中的像素信息constdpr=wx.getSystemInfoSync().pixelRatio//6.初始化canvas画布大小canvas.width=res[0].width*dprcanvas.height=res[0].height*dprctx.scale(dpr,dpr)//7.进行绘制//填充颜色ctx.fillStyle=rgb(200,0,0)//画一个矩形ctx.fillRect(10,20,100,200)//ctx.fillRect（x,y,width,height）})}})

10.1.1canvas组件通过上述代码运行，可以在页面上看到一个100pxx200px并且填充为红色的矩形，如图10-2所示。

10.1.2canvas对象相关方法通过教材案例可以总结出画布方法有：（1）Canvas.arc本方法用于创建一条弧线，包括6个参数分别为：x圆点x坐标、y圆点y坐标、r圆的半径、起始弧度（3点钟方向）、终止弧度、弧度方向是否为逆时针。因此创建一个圆时可以指定它的起始弧度为0，终止弧度为2*Ma