微信小程序开发文档 第53页

Color 可以用以下几种方式来表示 canvas 中使用的颜色： RGB 颜色：如'rgb(255, 0, 0)' RGBA 颜色：如'rgba(255, 0, 0, 0.3)' 16 进制颜色：如'#FF0000' 预定义的颜色：如'red' 其中预定义颜色有以下148个： Note: Color Name 大小写不敏感 Color Name HEX AliceBlue #F0F8FF AntiqueWhite #FAEBD7 Aqua #00FFFF Aquamarine #7FFFD4 Azure #F0FFFF Beige #F5F5DC Bisque #FFE4C4 Black #000000 BlanchedAlmond #FFEBCD Blue #0000FF BlueViolet #8A2BE2 Brown #A52A2A BurlyWood #DEB887 CadetBlue #5F9EA0 Chartreuse #7FFF00 Chocolate #D2691E Coral #FF7F50 CornflowerBlue #6495ED Cornsilk #FFF8DC Crimson #DC143C Cyan #00FFFF DarkBlue #00008B DarkCyan #008B8B DarkGoldenRod #B8860B DarkGray #A9A9A9 DarkGrey #A9A9A9 DarkGreen #006400 DarkKhaki #BDB76B DarkMagenta #8B008B DarkOliveGreen #556B2F DarkOrange #FF8C00 DarkOrchid #9932CC DarkRed #8B0000 DarkSalmon #E9967A DarkSeaGreen #8FBC8F DarkSlateBlue #483D8B DarkSlateGray #2F4F4F DarkSlateGrey #2F4F4F DarkTurquoise #00CED1 DarkViolet #9400D3 DeepPink #FF1493 DeepSkyBlue #00BFFF DimGray #696969 DimGrey #696969 DodgerBlue #1E90FF FireBrick #B22222 FloralWhite #FFFAF0 ForestGreen #228B22...

绘图接口和方法 渐变 渐变能用于填充一个矩形，圆，线，文字等。填充色可以不固定位固定的一种颜色。 我们提供了两种颜色渐变的方式： createLinearGradient(x, y, x1, y1)– 创建一个线性的渐变 createCircularGradient(x, y, r)– 创建一个从圆心开始的渐变 一旦我们创建了一个渐变对象，我们必须添加两个颜色渐变点。 addColorStop(position, color)方法用于指定颜色渐变点的位置和颜色，位置必须位于0到1之间。 可以用setFillStyle()和setStrokeStyle()方法设置渐变，然后进行画图描述。 使用 createLinearGradient() 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() 使用 createCircularGradient() 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() 绘图接口和方法

绘图接口和方法 Canvas 坐标系 canvas 是在一个二维的网格当中。 左上角的坐标为(0, 0)。 在之前的章节，我们用了这个方法fillRect(0, 0, 150, 75)。 它的含义为：从左上角(0, 0)开始，画一个150 x 75px 的矩形。 坐标系例子： 我们可以在<canvas/>中加上一些事件，来观测它的坐标系 <canvas canvas-id="myCanvas" style="margin: 5px; border:1px solid #d3d3d3;" bindtouchstart="start" bindtouchmove="move" bindtouchend="end"/> <view hidden="{{hidden}}"> Coordinates: ({{x}}, {{y}}) </view> Page({ data: { x: 0, y: 0, hidden: true }, start: function(e) { this.setData({ hidden: false, x: e.touches[0].x, y: e.touches[0].y }) }, move: function(e) { this.setData({ x: e.touches[0].x, y: e.touches[0].y }) }, end: function(e) { this.setData({ hidden: true }) } }) 当你把手指放到 canvas 中，就会在下边显示出触碰点的坐标： 绘图接口和方法

绘图接口和方法 在Canvas上画图 所有在<canvas/>中的画图必须用 JavaScript 完成： WXML：（我们在接下来的例子中如无特殊声明都会用这个 WXML 为模板，不再重复） <canvas canvas-id="myCanvas" style="border: 1px solid;"/> JS：（我们在接下来的例子中会将 JS 放在 onLoad 中） const ctx = wx.createCanvasContext('myCanvas') ctx.setFillStyle('red') ctx.fillRect(10, 10, 150, 75) ctx.draw() 第一步：创建一个 Canvas 绘图上下文 首先，我们需要创建一个 Canvas 绘图上下文 CanvasContext。 CanvasContext 是小程序内建的一个对象，有一些绘图的方法： const ctx = wx.createCanvasContext('myCanvas') 第二步：使用 Canvas 绘图上下文进行绘图描述 接着，我们来描述要在 Canvas 中绘制什么内容。 设置绘图上下文的填充色为红色： ctx.setFillStyle('red') 用fillRect(x, y, width, height)方法画一个矩形，填充为刚刚设置的红色： ctx.fillRect(10, 10, 150, 75) 第三步：画图 告诉<canvas/>组件你要将刚刚的描述绘制上去： ctx.draw() 结果： 绘图接口和方法

为了满足大家查询需要，我们收集并整理了一份 : 微信小程序导航大全 你可以很方便的通过扫二维码去使用这些小程序。 wx.navigateTo(OBJECT) 保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。 OBJECT 参数说明： 参数 类型 必填 说明 url String 是 需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 ‘path?key=value&key2=value2’ success Function 否 接口调用成功的回调函数 fail Function 否 接口调用失败的回调函数 complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行） 示例代码： wx.navigateTo({ url: 'test?id=1' }) //test.js Page({ onLoad: function(option){ console.log(option.query) } }) 注意：为了不让用户在使用小程序时造成困扰，我们规定页面路径只能是五层，请尽量避免多层级的交互方式。 wx.redirectTo(OBJECT) 关闭当前页面，跳转到应用内的某个页面。 OBJECT 参数说明： 参数 类型 必填 说明 url String 是 需要跳转的应用内非 tabBar 的页面的路径，路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 ‘path?key=value&key2=value2’ success Function 否 接口调用成功的回调函数 fail Function 否 接口调用失败的回调函数 complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行） 示例代码： wx.redirectTo({ url: 'test?id=1' }) wx.reLaunch(OBJECT) 基础库版本 1.1.0 开始支持，低版本需做兼容处理 关闭所有页面，打开到应用内的某个页面。 OBJECT 参数说明： 参数 类型 必填 说明 url String 是 需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 ‘path?key=value&key2=value2’，如果跳转的页面路径是 tabBar 页面则不能带参数 success Function 否 接口调用成功的回调函数 fail Function 否 接口调用失败的回调函数 complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行） 示例代码： wx.reLaunch({ url: 'test?id=1' }) //test.js Page({ onLoad: function(option){ console.log(option.query)...

wx.setTopBarText(OBJECT) 基础库 1.4.3 开始支持，低版本需做兼容处理 动设置置顶栏文字内容，只有当前小程序被置顶时能生效，如果当前小程序没有被置顶，也能调用成功，但是不会立即生效，只有在用户将这个小程序置顶后才换上设置的文字内容。注意：调用成功后，需间隔 5s 才能再次调用此接口，如果在 5s 内再次调用此接口，会回调 fail，errMsg：”setTopBarText: fail invoke too frequently” OBJECT参数说明： 参数 类型 必填 说明 text String 是 置顶栏文字内容 success Function 否 接口调用成功的回调函数 fail Function 否 接口调用失败的回调函数 complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行） 示例代码： wx.setTopBarText({ text: 'hello, world!' })

wx.setNavigationBarTitle(OBJECT) 动态设置当前页面的标题。 OBJECT参数说明： 参数 类型 必填 说明 title String 是 页面标题 success Function 否 接口调用成功的回调函数 fail Function 否 接口调用失败的回调函数 complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行） 示例代码： wx.setNavigationBarTitle({ title: '当前页面' }) wx.showNavigationBarLoading() 在当前页面显示导航条加载动画。 wx.hideNavigationBarLoading() 隐藏导航条加载动画。 wx.setNavigationBarColor(OBJECT) 基础库 1.4.0 开始支持，低版本需做兼容处理 OBJECT参数说明： 参数名 类型 必填 说明 frontColor String 是 前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000 backgroundColor String 是 背景颜色值，有效值为十六进制颜色 animation Object 否 动画效果 animation.duration Number 否 动画变化时间，默认0，单位：毫秒 animation.timingFunc String 否 动画变化方式，默认 linear success Function 否 接口调用成功的回调函数 fail Function 否 接口调用失败的回调函数 complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行） animation.timingFunc 有效值： 值 说明 linear 动画从头到尾的速度是相同的。 easeIn 动画以低速开始 easeOut 动画以低速结束。 easeInOut 动画以低速开始和结束。 success返回参数说明： 参数名 类型 说明 errMsg String 调用结果 示例代码： wx.setNavigationBarColor({ frontColor: '#ffffff', backgroundColor: '#ff0000', animation: { duration: 400, timingFunc: 'easeIn' } })

wx.onUserCaptureScreen(CALLBACK) 基础库 1.4.0 开始支持，低版本需做兼容处理 监听用户主动截屏事件，用户使用系统截屏按键截屏时触发此事件 CALLBACK返回参数： 无 示例代码： wx.onUserCaptureScreen(function(res) { console.log('用户截屏了') })

EditorContext 基础库 2.7.0 开始支持，低版本需做兼容处理。 EditorContext 实例，可通过 wx.createSelectorQuery 获取。 EditorContext 通过 id 跟一个 editor 组件绑定，操作对应的 editor 组件。 方法： EditorContext.blur(Object object) 基础库 2.8.3 开始支持，低版本需做兼容处理。 编辑器失焦，同时收起键盘。 参数 Object object 属性 类型 默认值 必填 说明 success function 否 接口调用成功的回调函数 fail function 否 接口调用失败的回调函数 complete function 否 接口调用结束的回调函数（调用成功、失败都会执行） EditorContext.clear(Object object) 基础库 2.7.0 开始支持，低版本需做兼容处理。 清空编辑器内容 参数 Object object 属性 类型 默认值 必填 说明 success function 否 接口调用成功的回调函数 fail function 否 接口调用失败的回调函数 complete function 否 接口调用结束的回调函数（调用成功、失败都会执行） EditorContext.format(string name, string value) 基础库 2.7.0 开始支持，低版本需做兼容处理。 修改样式 参数 string name 属性 string value 值 支持设置的样式列表 name value verson bold 2.7.0 italic 2.7.0 underline 2.7.0 strike 2.7.0 ins 2.7.0 script sub / super 2.7.0 header H1 / H2 / h3 / H4 / h5 / H6 2.7.0 align left / center / right / justify 2.7.0 direction rtl 2.7.0 indent...

wx.playBackgroundAudio(Object object) 从基础库 1.2.0 开始，本接口停止维护，请使用 wx.getBackgroundAudioManager 代替 使用后台播放器播放音乐。对于微信客户端来说，只能同时有一个后台音乐在播放。当用户离开小程序后，音乐将暂停播放；当用户在其他小程序占用了音乐播放器，原有小程序内的音乐将停止播放。 参数 Object object 属性 类型 默认值 必填 说明 dataUrl string 是 音乐链接，目前支持的格式有 m4a, aac, mp3, wav title string 否 音乐标题 coverImgUrl string 否 封面URL success function 否 接口调用成功的回调函数 fail function 否 接口调用失败的回调函数 complete function 否 接口调用结束的回调函数（调用成功、失败都会执行） 示例代码 wx.playBackgroundAudio({ dataUrl: '', title: '', coverImgUrl: '' })