小程序开发-Canvas画布组件
Canvas画布
基本使用方法：
- 在wxml中添加canvas组件
<canvas canvas-id='canvasDemo' class='demo'></canvas>
// canvas-id：必须填写
- 在对应js中执行绘画具体逻辑
// canvas.js
Page({
onReady() {
const query = wx.createSelectorQuery()
query.select('#canvasDemo')
.fields({ node: true, size: true })
.exec((res) => {
const canvas = res[0].node
const ctx = canvas.getContext('2d')
const dpr = wx.getSystemInfoSync().pixelRatio
canvas.width = res[0].width * dpr
canvas.height = res[0].height * dpr
ctx.scale(dpr, dpr)
ctx.fillRect(0, 0, 100, 100)
})
}
})
WebGL 示
绘图方法
-
CanvasContext.setFillStyle(color)设置填充色
color: 填充的颜色，默认颜色为black -
CanvasContext.fill()对当前路径中的内容进行填充。默认的填充色为黑色。
注意：如果当前路径没有闭合，fill() 方法会将起点和终点进行连接，然后填充。
fill() 填充的的路径是从 beginPath() 开始计算，但是不会将 fillRect() 包含进去。
-
CanvasContext.setStrokeStyle(color)设置描边色
color: 填充的颜色，默认颜色为black -
CanvasContext.stroke()画出当前路径的边框。默认颜色色为黑色。
stroke() 描绘的的路径是从 beginPath() 开始计算，但是不会将 strokeRect() 包含进去。 -
CanvasContext.beginPath()开始创建一个路径。需要调用 fill 或者 stroke 才会使用路径进行填充或描边
- 在最开始的时候相当于调用了一次 beginPath。
- 同一个路径内的多次 setFillStyle、setStrokeStyle、setLineWidth等设置，以最后一次设置为准。
CanvasContext.closePath()把路径移动到画布中的指定点，不创建线条。用 stroke 方法来画线条
- x: 目标位置的 x 坐标
- y: 目标位置的 y 坐标
CanvasContext.moveTo(x, y)把路径移动到画布中的指定点，不创建线条。用 stroke 方法来画线条
- x: 目标位置的 x 坐标
- y: 目标位置的 y 坐标
CanvasContext.draw(reserve, callback)将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中。
- reserve: 本次绘制是否接着上一次绘制。即 reserve 参数为 false，则在本次调用绘制之前 native 层会先清空画布再继续绘制；若 reserve 参数为 true，则保留当前画布上的内容，本次调用 drawCanvas 绘制的内容覆盖在上面，默认 false
- callback: 绘制完成后执行的回调函数
CanvasContext.rect(x, y, width, height)创建一个矩形路径。需要用 fill或者 stroke 方法将矩形真正的画到 canvas 中
- x: 矩形路径左上角的横坐标
- y: 矩形路径左上角的纵坐标
- width: 矩形路径的宽度
- height: 矩形路径的高度
CanvasContext.fillRect(x, y, width, height)填充一个矩形。用 setFillStyle 设置矩形的填充色，如果没设置默认是黑色。
- x: 矩形路径左上角的横坐标
- y: 矩形路径左上角的纵坐标
- width: 矩形路径的宽度
- height: 矩形路径的高度
CanvasContext.lineTo(x, y)增加一个新点，然后创建一条从上次指定点到目标点的线。用 stroke 方法来画线条
- x: 目标位置的 x 坐标
- y: 目标位置的 y 坐标
