小程序API


小程序API

1.监听加速度变化时间的API函数wx.onAccelerometerChange(function callback)

(1)该函数用于监听加速度变化时间,其参数function callback为加速度变化时间的回调函数,该回调参数Object res的属性如表1-1所示。监听频率根据函数wx.onAccelerometerChange(Object object)的参数object.intreval来决定。

表1-1 函数wx.onAccelerometerChange(function callback)的回调函数的参数属性说明
属性 类型 说明
x number X轴
y number Y轴
z number Z轴

(2)函数wx.startAccelerometerChange(Object object)用于开始监听加速度数据,参数Object object的属性如表1-2所示。

表1-2 函数wx.startAccelerometerChange(Object object)的参数属性说明
属性 类型 默认值 必填 说明
interval string normal 监听加速度数据的频率
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功失败都会执行)

(3)object.interval的合法值如表1-3所示。

表1-3 object.interval的合法值
说明
game 适用于更新游戏的回调频率,在20ms/次左右
ui 适用于更新ui的回调频率,在60ms/次左右
normal 普通的回调频率,在200ms/次左右

(4)函数wx.stopAccelerometerChange(Object object)用于停止监听加速度数据,参数Object object的属性只包括success,fail和complete三个回调函数。

2.API函数CanvasContext wx.createCanvasContext(string canvasId,Object this)。

用于创建canvas的绘图上下文CanvasContext对象,参数string canvasId是指要获取上下文的canvas组件,Object this是指在自定义组件下,当前组件的实例的this,表示在这个自定义组件下查找拥有canvas-id的canvas,如果省略则不在任何自定义组件中查找,返回值为CanvasContext的对象。

3.CanvasContext 对象用于绘图和设置图形样式

其常用属性如表3-1所示

表3-1 CanvasContext 对象常用属性
属性类型 属性 属性说明
string fillStyle 填充颜色。用法同CanvasContext.setFillStyle()
string strokeStyle 边框颜色。用法同CanvasContext.setFillStyle()
number shadowOffsetX 阴影相对于形状在水平方向上的偏移
number shadowOffsetY 阴影相对于形状在垂直方向上的偏移
number shadowColor 阴影的颜色
number shadowBlur 阴影的模糊级别
number lineWidth 线条的宽度。用法同CanvasContext.LineWidth()
number lineCap 线条的端点样式。用法同CanvasContext.LineCap()
number lineJoin 线条的交点样式。用法同CanvasContext.LineJoin()
number miterLimit 最大斜接长度。用法同CanvasContext.setMiterLimit()
number lneDashOffset 虚线偏移量,初始值是0
string font 当前字体样式的属性。符合CSSfont语法的DOMString字符串,至少需要提供字体大小和字体族名。默认值是10px
number globalApha 全局画笔透明度。范围为0-1,0为完全透明,1为完全不透明
string globalCompositeOperation 在绘制新图形时应用的合成操作的类型。目前安卓版只适用于fill填充块的合成,用于stroke线段的合成效果都是source-over

4.CanvasContext 对象常用方法

(1) CanvasContext.draw(boolean reserve, function callback)。将之前在绘图上下文中的描述(路径、变形、样式)画到 canvas 中。

(2)CanvasGradient CanvasContext.createLinearGradient(number xo, number yo,number x1,number y1)。创建一个线性的渐变颜色。返回的 CanvasGradient对象需要使用CanvasGradient.addColorStop() 来指定渐变点,至少要两个。

(3)CanvasGradient CanvasContext.creatcCircularGradient(number x, number y, numberr)。创建一个圆形的渐变颜色。起点在圆心,终点在圆环。返回的 CanvasGradient 对象需要使用 CanvasGradient.addColorStop0 来指定渐变点,室少要两个。

(4)CanvasContext.createPattern(string image, string tepetition)。对指定的图像创建模式的方法,可在指定的方向上重复源图像。

(5)Object CanvasContext.measureText(string text)。测量文本尺寸信息,目前仅返回文本宽度,同步接口。

(6)CanvasContext.save()。保存绘图上下文。

(7)CanvasContext.restore()。恢复之前保存的绘图上下文。

(8)CanvasContext.beginPath()。开始创建一个路径。需要调用 fill或者 stroke 才会使用路径进行填充或描边在最开始的时候相当于调用了一次 beginPath。同一个路径内的多次setFillStyle、setStrokeStyle、setLineWidth 等设置,以最后一次设置为准。

(9)CanvasContext.moveTo(number x, number y)。把路径移动到画布中的指定点,不创建线条,用 stroke 方法来画线条。

(10)CanvasContext.lineTo(number x, number y)。增加一个新点,然后创建一条从上次指定点到目标点的线,用 stroke 方法来画线条。

(11)CanvasContext.quadraticCurveTo(number cpx, number cpy, number x, number y)。创建二次贝塞尔曲线路径,曲线的起始点为路径中前一个点。

(12)CanvasContext.bezierCurveTo()。创建二次贝塞尔曲线路径,曲线的起始点为路径前一个点。

(13)CanvasContext.arc(number x, number y, number r, number sAngle, number eAngle,plean counterclockwise)。创建一条弧线,创建一个圆可以指定起始弧度为 0,终止弧度为 2*Math.PI,用 stroke 或者 fill 方法来在 canvas 中画弧线。

(14) CanvasContext.rect(number x, number y, number width, number height)。矩形路径,需要用 fill 或者 stroke 方法将矩形真正画到 canvas 中。

(15)CanvasContext.arcTo(number x1, number y1, number x2, number y2, number radius)。根据控制点和半径绘制圆弧路径。

(16)CanvasContext.clip()。从原始画布中剪切任意形状和尺寸。一旦剪切了某个区域。则所有之后的绘图都会被限制在被剪切的区域内(不能访问画布上的其他区域)。可以在使用 clip 方法前通过使用 save 方法对当前画布区域进行保存,并在以后的任意时间通过 restore方法对其进行恢复。

(17)CanvasContext.fillRect(number x, number y, number width, number height)。填充一个矩形,用 setFillStyle 设置矩形的填充色,如果没设置默认是黑色。

(18) CanvasContext.strokeRect(number x, number y, number width, number height)。画一个矩形(非填充),用 setStrokeStyle 设置矩形线条的颜色,如果没设置默认是黑色。(19)CanvasContext.clearRect(number x, number y, number width, number height)。清除画布上在该矩形区域内的内容。(20)CanvasContext.fill()。对当前路径中的内容进行填充,默认的填充色为黑色。

(21)CanvasContext.stroke()。画出当前路径的边框,默认颜色为黑色。

(22)CanvasContext.closePath()。关闭一个路径,会连接起点和终点。如果关闭路径后没有调用 6ill 或者 stroke 并开启了新的路径,那之前的路径将不会被渲染。

(23)CanvasContext.scale(number scaleWidth, number scaleHeight)。在调用后,之后创建的路径其横纵坐标会被缩放,多次调用倍数会相乘。

(24)CanvasContext.rotate(number rotate)。以原点为中心顺时针旋转当前坐标轴,多次调用旋转的角度会叠加,原点可以用 translate 方法修改。

(25)CanvasContext.translate(number x, number y)。对当前坐标系的原点(0,0)进行变换,默认的坐标系原点为页面左上角。

(26)CanvasContext.drawImage(string imageResource, number sx, number sy, number sWidth,number sHeight, number dx, number dy, number dWidth, number dHeight)。绘制图像到画布。

(27)CanvasContext.strokeText(string text, number x, number y, number maxWidth)。给定的(x,y)位置绘制文本描边的方法。

(28)CanvasContext.transform(number scaleX, number scaleY, number skewX, number skewY, number translateX, number translateY)。使用矩阵多次叠加当前变换的方法。

(29) CanvasContext.setTransform(number scaleX, number scaleY, number skewX, numberskewY, number translateX, number translateY)。使用矩阵重新设置(覆盖)当前变换的方法。

(30)CanvasContext.setFillStyle(Color color)。设置填充色。

(31)CanvasContext.setStrokeStyle(Color color)。设置描边颜色。

(32)CanvasContext.setShadow(number offetX, number offetY, number blur, stringcolor)。设置阴影样式。

(33)CanvasContext.setGlobalAlpha(number alpha)。设置全局画笔透明度。

(34)CanvasContext,setLineWidth(number lineWidth)。设置线条的宽度。

(35)CanvasContext.setLineJoin(string lineJoin)。设置线条的交点样式。


文章作者: 桑落
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 桑落 !
评论
  目录