微信小程序实战-第6章 API应用案例（下）

微信小程序实战-第6章 API应用案例（下）

6.1 【案例5】模拟时钟

6.1.1案例分析

6.1.2前导知识

canvas用法：

• 创建canvas.wxml文件。

<canvas canvas-id="myCanvas"></canvas>

• canvas组件默认样式如下。

canvas {
   
   
   width: 300px;
   height: 150px;
   display: block;
   position: relative;
}

第1步：创建Canvas绘图上下文对象CanvasContext

const ctx =  wx.createCanvasContext('myCanvas')

第2步：使用Canvas绘图上下文进行绘图描述

ctx.setFillStyle('red') 	     // 设置填充色为红色
// 画一个矩形，填充为红色
ctx.fillRect(10, 20, 150, 75)     // ctx.fillRect(x, y, width, height)

第3步：画图

ctx.draw()

第1步：创建Canvas绘图上下文对象CanvasContext

const ctx =  wx.createCanvasContext('myCanvas')

第2步：设置线条颜色和线宽

ctx.setStrokeStyle('#ff0000')
ctx.setLineWidth(2)

第3步：移动画笔坐标位置，绘制（外部大圆）

ctx.moveTo(160, 100)
ctx.arc(100, 100, 60, 0, 2 * Math.PI, true)

第4步：移动画笔坐标位置，绘制（嘴巴线条）

ctx.moveTo(140, 100)
ctx.arc(100, 100, 40, 0, Math.PI, false)

第5步：移动画笔坐标位置，绘制（左眼圆圈）

ctx.moveTo(85, 80)
ctx.arc(80, 80, 5, 0, 2 * Math.PI, true)

第6步：移动画笔坐标位置，绘制（右眼圆圈）

ctx.moveTo(125, 80)
ctx.arc(120, 80, 5, 0, 2 * Math.PI, true)

第7步：画出当前路径的边框

ctx.stroke()

第8步：移动画笔坐标位置，绘制（左眼圆圈）

wx.draw ()

CanvasContext.draw ()：将之前在绘图上下文中的描述（路径、样式、变形）画到canvas中。
CanvasContext.arc()：创建一条弧线。
CanvasContext.rect()：创建一个矩形路径。
CanvasContext.lineTo()：新增一个新点，用stroke方法来画线条。
CanvasContext.moveTo()：把路径移动到画布中的指定点，不创建线条。

6.1.3钟表页面布局

clock.wxml

 <canvas canvas-id="myCanvas" class="mycanvas"></canvas>

clock.wxss

.mycanvas{
   
    width: 100%;height: 100%;position: fixed; }

6.1.4钟表页面绘制

clock.js

 Page({
   
    
  width: 0, height: 0 ,// 初始化宽高
  onLoad: function() {
   
    wx.getSystemInfo({
   
    }) }, // 获取系统的宽高
  timer:null,
  onReady: function() {
   
   
     … …
     function draw(){
   
     } // 绘制函数
     function drawClock(ctx, radius) {
   
   } // 绘制表盘部分
     function drawHand(ctx, radius) {
   
   } // 绘制指针部分
  }
})

6.2 【案例6】罗盘动画

6.2.1案例分析

6.2.2前导知识

6.2.3设计罗盘界面布局

6.2.4手指触摸旋转罗盘

compass.js

var animation
var angle = 0    
var x1, y1, x3, y3
// 判断坐标系是顺时针还是逆时针
function judgeturn(x1, y1, x3, y3) {
   
   
  var x2 = 150
  var y2 = 150
  return !((x2 - x1) * (y3 - y2) - (y2 - y1) * (x3 - x2) > 0)
}

6.2.5单击按钮操作罗盘

rotate: function() {
   
   
  animation.rotate