微信小程序 -- 画布

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

你可能感兴趣的:(微信小程序 -- 画布)