==> => => => </view> const date = new Date() const years = [] const months = [] const days = [] for (let i = 1990; i <= date.getFullYear(); i++) { years.push(i) } for (let i = 1 ; i <= 12; i++) { months.push(i) } for (let i = 1 ; i <= 31; i++) { days.push(i) } Page({ data: { years: years, year: date.getFullYear(), months: months, month: 2, days: days, day: 2, year: date.getFullYear(), value: [9999, 1, 1], }, bindChange: function(e) { const val = e.detail.value this.setData({ year: this.data.years[val[0]], month: this.data.months[val[1]], day: this.data.days[val[1]] }) } })

Canvas增强

createCircularGradient定义

创建一个圆形的渐变颜色。

Tip: 起点在圆心，终点在圆环。

Tip: 需要使用 addColorStop() 来指定渐变点，至少要两个。

参数

参数类型定义

xNumber圆心的x坐标

yNumber圆心的y坐标

rNumber圆的半径

例子

const ctx = wx.createCanvasContext('myCanvas') // Create circular gradient const grd = ctx.createCircularGradient(75, 50, 50) grd.addColorStop(0, 'red') grd.addColorStop(1, 'white') // Fill with gradient ctx.setFillStyle(grd) ctx.fillRect(10, 10, 150, 80) ctx.draw()

createLinearGradient定义

创建一个线性的渐变颜色。

Tip: 需要使用 addColorStop() 来指定渐变点，至少要两个。

参数

参数类型定义

x0Number起点的x坐标

y0Number起点的y坐标

x1Number终点的x坐标

y1Number终点的y坐标

例子

const ctx = wx.createCanvasContext('myCanvas') // Create linear gradient const grd = ctx.createLinearGradient(0, 0, 200, 0) grd.addColorStop(0, 'red') grd.addColorStop(1, 'white') // Fill with gradient ctx.setFillStyle(grd) ctx.fillRect(10, 10, 150, 80) ctx.draw()

strokeRect定义

画一个矩形(非填充)。

Tip: 用 setFillStroke() 设置矩形线条的颜色，如果没设置默认是黑色。

参数

参数类型范围说明

xNumber矩形路径左上角的x坐标

yNumber矩形路径左上角的y坐标

widthNumber矩形路径的宽度

heightNumber矩形路径的高度

例子

const ctx = wx.createCanvasContext('myCanvas') ctx.setStrokeStyle('red') ctx.strokeRect(10, 10, 150, 75) ctx.draw()

fillRect定义

填充一个矩形。

Tip: 用 setFillStyle() 设置矩形的填充色，如果没设置默认是黑色。

参数

参数类型说明

xNumber矩形路径左上角的x坐标

yNumber矩形路径左上角的y坐标

widthNumber矩形路径的宽度

heightNumber矩形路径的高度

例子

const ctx = wx.createCanvasContext('myCanvas') ctx.setFillStyle('red') ctx.fillRect(10, 10, 150, 75) ctx.draw()

arc定义

画一条弧线。

Tip: 创建一个圆可以用 arc() 方法指定其实弧度为0，终止弧度为 2 * Math.PI。

Tip: 用 stroke() 或者 fill() 方法来在 canvas 中画弧线。

参数

参数类型说明

xNumber圆的x坐标

yNumber圆的y坐标

rNumber圆的半径

sAngleNumber起始弧度，单位弧度（在3点钟方向）

eAngleNumber终止弧度

counterclockwiseBoolean可选。指定弧度的方向是逆时针还是顺时针。默认是false，即顺时针。

例子

const ctx = wx.createCanvasContext('myCanvas') // Draw coordinates ctx.arc(100, 75, 50, 0, 2 * Math.PI) ctx.setFillStyle('#EEEEEE') ctx.fill() ctx.beginPath() ctx.moveTo(40, 75) ctx.lineTo(160, 75) ctx.moveTo(100, 15) ctx.lineTo(100, 135) ctx.setStrokeStyle('#AAAAAA') ctx.stroke() ctx.setFontSize(12) ctx.setFillStyle('black') ctx.fillText('0', 165, 78) ctx.fillText('0.5*PI', 83, 145) ctx.fillText('1*PI', 15, 78) ctx.fillText('1.5*PI', 83, 10) // Draw points ctx.beginPath() ctx.arc(100, 75, 2, 0, 2 * Math.PI) ctx.setFillStyle('lightgreen') ctx.fill() ctx.beginPath() ctx.arc(100, 25, 2, 0, 2 * Math.PI) ctx.setFillStyle('blue') ctx.fill() ctx.beginPath() ctx.arc(150, 75, 2, 0, 2 * Math.PI) ctx.setFillStyle('red') ctx.fill() // Draw arc ctx.beginPath() ctx.arc(100, 75, 50, 0, 1.5 * Math.PI) ctx.setStrokeStyle('#333333') ctx.stroke() ctx.draw()

针对 arc(100, 75, 50, 0, 1.5 * Math.PI)的三个关键坐标如下：

在Canvas上画图

所有在 <canvas/> 中的画图必须用 JavaScript 完成：

WXML：（我们在接下来的例子中如无特殊声明都会用这个 WXML 为模板，不再重复）

="border: 1px solid;"/>