《微信小程序开发》课件——第4章 微信小程序常用API（上）_137-173.pdf

04【案例4-4】模拟时钟

案例分析

“模拟时钟”微信小程序利用canvas组件绘制时钟，

刻度为12个刻度，需要分别画出中心圆、外层大圆、

时针、分针、秒针。“模拟时钟”微信小程序的页

面效果如右图所示。

知识储备

1.canvas组件

先定一个小

目标！

掌握canvas组件，能够灵活运用

canvas组件创建画布

知识储备

1.canvas组件

什么是canvas组件?

知识储备

1.canvas组件

在HTML中，canvas标签可用于图形的绘制，

也可用于创建图片特效和动画。在微信小程序中，

canvas组件也起着类似作用，可用于自定义绘制

图形，该组件支持2D和WebGL的绘图。

知识储备

1.canvas组件

canvas组件的常用属性如下表所示。

属性类型说明

typestring指定canvas组件的类型，支持2D和WebGL

canvas组件的唯一标识符，若指定了type属性则无须再指定该

canvas-idstring属性

当在canvas中移动时且有绑定手势事件时，禁止屏幕滚动及下

disable-scrollboolean

拉刷新，默认值为false

bindtouchstarteventhandle手指触摸动作开始

bindtouchmoveeventhandle手指触摸后移动

bindtouchendeventhandle手指触摸动作结束

bindtouchcanceleventhandle手指触摸动作被打断，例如来电提醒，弹窗等

手指长按500毫秒之后触发，触发了长按事件后进行移动不会

bindlongtapeventhandle触发屏幕的滚动

binderroreventhandle当发生错误时触发error事件

知识储备

1.canvas组件

演示canvas组件的使用

步骤1在pages/index/index.wxml文件中编写页面结构。

canvasid=myCanvastype=2d/canvas

步骤2

定义了canvas组件，用于创建画布。其中，type属性值为2d，

表示使用Canvas2D接口。

知识储备

1.canvas组件

演示canvas组件的使用

步骤1在pages/index/index.wxss文件中编写canvas组件的页面样式。

#myCanvas{

displayblock;

步骤2width300px;

height150px;