wx.createCanvasContext(canvasID)
指定canvasID, 创建canvas绘图的上下文
setFillStyle {#setfillstyle}
设置填充色
setStrokeStyle
设置边框颜色
setShadow
设置阴影
offsetX | 阴影相对于形状在水平方向的偏移 |
---|---|
offsetY | 阴影相对于形状在竖直方向的偏移 |
blur | 阴影的模糊级别(取值范围0-100) |
color | 阴影的颜色 |
createLinearCradient
创建一个线性的渐变颜色
使用addColorStop(),指定渐变点,至少需要两个渐变点
x0, y0, x1, y1分别代表起点的坐标, 终点的坐标
createCircularGradient
创建一个圆形的渐变颜色
起点在圆心,终点在圆环
需要使用addColorStop(),来指定渐变点,至少需要两个渐变点
x, y, r,分别代表圆心的坐标,圆的半径
addColorStop
创建一个颜色的渐变点
小于最小stop的部分会按照最小的stop的颜色来渲染,同样,大于最大stop的部分会按照最大stop的color来渲染
stop表示渐变点在起点和终点中的位置,取值范围是0-1
color表示渐变点的颜色
setLineWidth
设置线条的宽度
lineWidth 线条的宽度,单位是px
setLineCap
设置线条的端点样式
lineCap 线条的结束端点样式,取值范围是butt, round, square
setLineJoin
设置线条的交点样式
lineJoin 线条的结束的交点样式 ,取值范围是 bevel, round, miter
setMiterLImit
设置最大斜接长度, 指的是在两条线交汇处内角和外角之间的距离
当setLineJoin()为miter时候,才有效
超过最大倾斜长度时候,连接处将以lineJoin为bevel来显示
rect
创建一个矩形
需要使用fill(), stroke()方法将矩形真正的画到canvas中
x, y, width, height分别表示矩形的左上角坐标, 矩形的宽度,高度
fillRect
填充一个矩形,参数同rect
strokeRect
画一个矩形(非填充)参数同: rect
clearRect
清除画布上该矩形区域内的内容,参数同rect
fill
对当前路径中的内容进行填充,
如果当前路径没有闭合,fil()方法会将起点和终点进行连接,然后填充
fill()填充的路径是从beginPath()开始计算,但是不会将fillRect()包含进去
stroke
画出当前路径的边框
storke() 描绘的路径是从beginPath()开始计算,但是不会将fillRect()包含进去
beginPath
开始创建一个路径,需要调用fill或者stroke才会使用路径进行填充或者描边
在最开始的时候相当于调用了一次 beginPath()
同一个路径中多次setFillStyle() , setStrokeStyle(), setLineWidth()等设置,以最后一次设置为准
closePath
关闭一个路径
关闭路径会连接起点和终点
如果关闭路径后没有调用fill() ,stroke()并开启新的路径, 之前的路径不会被渲染
moveTo
把路径移动到画布中的指定点,不创建线条
x, y表示目标位置的x坐标,y坐标
lineTo
lineTo方法增加一个新点, 然后创建 一条从上次指定点到目标点的线
arc
画一条弧线
创建一个圆可以用arc()方法指定起始弧度 为0, 终止弧度为 2*Math.PI
x, y, r 表示圆心的坐标, r表示圆的半径
sAngle 表示起始弧度, eAngle表示终止弧度
counterclockwise 表示指定的弧度方向是逆时针还是顺时针
bezierCurveTo
创建三次方贝塞尔曲线路径
曲线的起始点为路径中前一个点
cp1x, cp1y, cp2x, cp2y表示第一个,第二个贝塞尔控制点的坐标
x, y表示结束点的坐标
quadraticCurveTo
定义二次贝塞尔曲线路径
曲线的起始点为路径中前一个点
cpx, cpy, x, y分别表示贝塞尔控制点的坐标, 结束点的坐标
scale
调用scale方法,创建的路径坐标会被缩放
调用scale方法后, 之后创建的路径的坐标也会被缩放
scaleWidth, scaleHeight横纵坐标缩放的倍数
rotate
以原点为中心, 顺时针旋转当前坐标轴
多次调用rotate, 旋转的角度会叠加
原点可以使用translate方法修改
rotate 旋转角度,角度使用弧度计数(degrees * Math.PI/180 , degrees范围是0~360)
translate
对当前坐标系的原点(0,0)进行变换, 默认的坐标系原点为页面左上角
x,y表示水平坐标平移量, 竖直坐标平移量
setFonSize
设置字体的字号
fontSize表示字体的字号
fillText
在画布上绘制被填充的文本
text表示在画布上输出的文本,
x, y表示绘制文本的左上角x的坐标位置
drawImage
绘制图像,图像保持原始尺寸
imageResource 表示绘制的图片资源
x, y, width, height表示图像左上角坐标, 图像宽度和图像高度
setGlobalAlpha
设置全局画笔透明度
alpha 透明度,数值为0~1
save
保存当前的绘图上下文
restore
恢复之前保存的绘图上下文
draw
将之前在绘图上下文中的描述(路径,变形,样式)画到canvas中
绘图上下文需要由wx.createCanvasContext(canvasID)来创建
reserve, 表示是否接着上一次绘制,选值为true, false