一、canvas组件
在 test.wxml 中添加 canvas 组件
<canvas canvas-id='canvas-demo' class='demo'></canvas>
// canvas-id：必须填写
二、绘图
在 test.js 中进行绘图
let context = ex.createCanvasContext('canvas-demo') // 为canvas-id = 'canvas-demo' 创建一个绘图上下文 CanvasContext 对象
1、CanvasContext.setFillStyle(color)
设置填充色
-
color: 填充的颜色，默认颜色为black
2、CanvasContext.fill()
对当前路径中的内容进行填充。默认的填充色为黑色。
注意：如果当前路径没有闭合，
fill()方法会将起点和终点进行连接，然后填充。
fill()填充的的路径是从beginPath()开始计算，但是不会将fillRect()包含进去。
3、CanvasContext.setStrokeStyle(color)
设置描边色
-
color: 填充的颜色，默认颜色为black
4、CanvasContext.stroke()
画出当前路径的边框。默认颜色色为黑色。
stroke()描绘的的路径是从beginPath()开始计算，但是不会将strokeRect()包含进去。
5、CanvasContext.beginPath()
开始创建一个路径。需要调用
fill或者stroke才会使用路径进行填充或描边
- 在最开始的时候相当于调用了一次
beginPath。 - 同一个路径内的多次
setFillStyle、setStrokeStyle、setLineWidth等设置，以最后一次设置为准。
6、CanvasContext.closePath()
关闭一个路径。会连接起点和终点。如果关闭路径后没有调用
fill或者stroke并开启了新的路径，那之前的路径将不会被渲染。
7、CanvasContext.moveTo(x, y)
把路径移动到画布中的指定点，不创建线条。用
stroke方法来画线条
-
x: 目标位置的 x 坐标 -
y: 目标位置的 y 坐标
8、CanvasContext.draw(reserve, callback)
将之前在绘图上下文中的描述（路径、变形、样式）画到
canvas中。
-
reserve: 本次绘制是否接着上一次绘制。即reserve参数为false，则在本次调用绘制之前native层会先清空画布再继续绘制；若reserve参数为true，则保留当前画布上的内容，本次调用drawCanvas绘制的内容覆盖在上面，默认false -
callback: 绘制完成后执行的回调函数
三、图形
1、字
a、CanvasContext.fillText(text, x, y, maxWidth)
在画布上绘制被填充的文本
-
text: 在画布上输出的文本 -
x: 绘制文本的左上角 x 坐标位置 -
y: 绘制文本的左上角 y 坐标位置 -
maxWidth: 需要绘制的最大宽度
b、CanvasContext.setFontSize(fontSize)
设置字体的字号
-
fontSize: 字体的字号
c、CanvasContext.setTextAlign(align)
设置文字的对齐
- align: 文字的对齐方式(left、center、right)
d、CanvasContext.setTextBaseline(textBaseline)
设置文字的竖直对齐
-
textBaseline: 文字的竖直对齐方式（top、bottom、middle、normal）
文字垂直对齐方式
2、圆、弧
a、CanvasContext.arc(x, y, r, sAngle, eAngle, counterclockwise)
创建一条弧线
创建一个圆可以指定起始弧度为 0，终止弧度为 2 * Math.PI。
用 stroke 或者 fill 方法来在 canvas 中画弧线。
-
x: 圆心的x轴坐标 -
y: 圆心的y轴坐标 -
r: 圆的半径 -
sAngle: 绘圆的起始位置（0默认3点中方向） 取值为角度值 -
eAngle: 绘圆的结束位置 取值为角度值
Math.PI为9点中位置，2 * Math.PI为3点钟方向 -
counterclockwise: 绘制圆的方向，默认为false：顺时针，true：逆时针
ctx.arc(100, 75, 50, 0, Math.PI, true) // 绘制一个上半圆
ctx.setFillStyle('#EEEEEE') // 设置内部填充色
ctx.fill() // 对当前路径中的内容进行填充。默认的填充色为黑色。如果当前路径没有闭合，fill() 方法会将起点和终点进行连接，然后填充。
ctx.draw() // 将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中。
3、矩形
a、CanvasContext.rect(x, y, width, height)
创建一个矩形路径。需要用
fill或者stroke方法将矩形真正的画到canvas中
-
x: 矩形路径左上角的横坐标 -
y: 矩形路径左上角的纵坐标 -
width: 矩形路径的宽度 -
height: 矩形路径的高度
ctx.rect(10, 10, 150, 75)
ctx.setFillStyle('red')
ctx.fill()
ctx.draw()
b、CanvasContext.fillRect(x, y, width, height)
填充一个矩形。用
setFillStyle设置矩形的填充色，如果没设置默认是黑色。
-
x: 矩形路径左上角的横坐标 -
y: 矩形路径左上角的纵坐标 -
width: 矩形路径的宽度 -
height: 矩形路径的高度
ctx.setFillStyle('red')
ctx.fillRect(10, 10, 150, 75)
ctx.draw()
c、CanvasContext.strokeRect(number x, number y, number width, number height)
画一个矩形(非填充)。 用
setStrokeStyle设置矩形线条的颜色，如果没设置默认是黑色。
-
x: 矩形路径左上角的横坐标 -
y: 矩形路径左上角的纵坐标 -
width: 矩形路径的宽度 -
height: 矩形路径的高度
ctx.setStrokeStyle('red')
ctx.strokeRect(10, 10, 150, 75)
ctx.draw()
4、线
a、CanvasContext.lineTo(x, y)
增加一个新点，然后创建一条从上次指定点到目标点的线。用
stroke方法来画线条
-
x: 目标位置的x坐标 -
y: 目标位置的y坐标
ctx.moveTo(0,0)
ctx.lineTo(100,100)
ctx.stroke()
ctx.draw()
b、绘制一个正方形，且4条边颜色不同
ctx.beginPath()
ctx.setStrokeStyle('#f00')
ctx.moveTo(20,20)
ctx.lineTo(120,20)
ctx.stroke()
ctx.beginPath()
ctx.setStrokeStyle('#0f0')
ctx.moveTo(120, 20)
ctx.lineTo(120, 120)
ctx.stroke()
ctx.beginPath()
ctx.setStrokeStyle('#00f')
ctx.moveTo(120, 120)
ctx.lineTo(20, 120)
ctx.stroke()
ctx.beginPath()
ctx.setStrokeStyle('#f0f')
ctx.moveTo(20, 120)
ctx.lineTo(20, 20)
ctx.stroke()
ctx.draw()
c、绘制一个三角形，且填充颜色
ctx.setFillStyle('#ff0')
// ctx.setStrokeStyle('#f00') // 设置边框颜色
ctx.moveTo(20,20)
ctx.lineTo(20,120)
ctx.lineTo(120,120)
ctx.lineTo(20,20)
// ctx.stroke() // 绘制边框
ctx.fill()
ctx.draw()
5、CanvasContext.setShadow(offsetX, offsetY, blur, color)
设定阴影样式
-
offsetX: 阴影相对于形状在水平方向的偏移，默认值为 0。 -
offsetY: 阴影相对于形状在竖直方向的偏移，默认值为 0。 -
blur: 阴影的模糊级别，数值越大越模糊。范围 0- 100。，默认值为 0。 -
color: 阴影的颜色。默认值为 black。
ctx.setFillStyle('#f00')
ctx.setShadow(0,0,50,'#f00')
ctx.fillRect(50,50,100,50)
ctx.draw()
5、图片
a、CanvasContext.drawImage(imageResource, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
四、渐变色
1、CanvasContext.createLinearGradient(x0, y0, x1, y1)
创建一个线性的渐变颜色。返回的
CanvasGradient对象需要使用CanvasGradient.addColorStop()来指定渐变点，至少要两个。
-
x0: 起点的x0坐标 -
y0: 起点的y0坐标 -
x: 终点的x坐标 -
y: 终点的y坐标
// 创建一个CanvasGradient对象
let grd = ctx.createLinearGradient(0, 0, 200, 0)
grd.addColorStop(0, '#f00')
grd.addColorStop(1, '#0f0')
ctx.setFillStyle(grd)
ctx.fillRect(10, 10, 150, 80)
ctx.draw()
2、CanvasContext.createCircularGradient(x, y, r)
创建一个圆形的渐变颜色。起点在圆心，终点在圆环。返回的
CanvasGradient对象需要使用CanvasGradient.addColorStop()来指定渐变点，至少要两个。
-
x: 圆心的x坐标 -
y: 圆心的y坐标 -
r: 圆的半径
let grd = ctx.createCircularGradient(100, 100, 50)
grd.addColorStop(0, 'red')
grd.addColorStop(1, 'white')
ctx.setFillStyle(grd)
ctx.arc(100,100,75,0,2*Math.PI)
ctx.fill()
ctx.draw()
网友评论