微信小程序中的canvas(2D)

微信小程序中的组件提供了一个用于绘制图形的画布，支持 2D 绘图。以下是对微信小程序中 2D 组件的详细介绍，包括属性、方法、事件和示例代码。

一、组件属性

基本属性

canvas-id: 在自定义组件中使用时，指定组件的唯一标识符，用于创建绘图上下文。

disable-scroll: 是否禁用滚动，通过设置为 true 可以禁用画布的滚动事件。

二、绘图上下文对象（CanvasContext）

通过 wx.createCanvasContext(canvasId, this) 方法可以获取到 2D 绘图上下文对象 CanvasContext，然后可以使用这个对象进行各种绘图操作。

三、CanvasContext 方法

路径

beginPath(): 开始创建一条路径。

closePath(): 闭合路径。

moveTo(x, y): 将起始点移动到指定的坐标 (x, y)。

lineTo(x, y): 绘制一条从当前位置到指定坐标 (x, y) 的直线。

arc(x, y, radius, startAngle, endAngle, counterclockwise): 绘制圆弧路径。

rect(x, y, width, height): 创建一个矩形路径。

样式

setFillStyle(color): 设置填充样式。

setStrokeStyle(color): 设置线条样式。

setLineWidth(width): 设置线条宽度。

setLineCap(cap): 设置线条端点样式。

setLineJoin(join): 设置两条线相交时，所创建的拐角类型。

setMiterLimit(limit): 设置最大斜接长度。

setShadow(offsetX, offsetY, blur, color): 设置阴影样式。

setGlobalAlpha(alpha): 设置全局透明度。

文本

setFontSize(size): 设置字体大小。

setTextAlign(align): 设置文本的对齐方式。

setTextBaseline(baseline): 设置文本的基线对齐方式。

fillText(text, x, y, maxWidth): 绘制填充文本。

strokeText(text, x, y, maxWidth): 绘制描边文本。

图像

drawImage(imageResource, dx, dy, dWidth, dHeight, sx, sy, sWidth, sHeight): 绘制图像。

渐变

createLinearGradient(x0, y0, x1, y1): 创建一个线性渐变。

createCircularGradient(x, y, r): 创建一个圆形渐变。

其他

fill(): 填充当前路径。

stroke(): 绘制当前路径。

clearRect(x, y, width, height): 清除指定矩形区域内的内容。

clip(): 从原始画布剪切任意形状和尺寸的区域。

save(): 保存当前的绘图上下文。

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

变换

rotate(angle): 旋转当前绘图。

scale(sx, sy): 缩放当前绘图。

translate(dx, dy): 平移当前绘图。

transform(a, b, c, d, e, f): 使用矩阵多次叠加变换。

setTransform(a, b, c, d, e, f): 设置当前变换矩阵。

四、事件

touchStart: 手指触摸画布时触发。

touchMove: 手指在画布上移动时触发。

touchEnd: 手指离开画布时触发。

touchCancel: 手指在画布上发生异常情况时（如触摸被打断）触发。

五、示例代码

WXML 部分

html 复制代码

<view class="container">
  <canvas id="myCanvas" canvas-id="myCanvasId" style="width: 300px; height: 200px;"></canvas>
</view>

JS 部分

javascript 复制代码

Page({
  onReady: function () {
    const context = wx.createCanvasContext('myCanvasId')

    // 绘制红色矩形
    context.setFillStyle('red')
    context.fillRect(20, 20, 150, 100)

    // 绘制蓝色矩形边框
    context.setStrokeStyle('blue')
    context.strokeRect(20, 20, 150, 100)

    // 绘制绿色圆形
    context.beginPath()
    context.arc(150, 75, 50, 0, 2 * Math.PI)
    context.setFillStyle('green')
    context.fill()

    // 绘制文本
    context.setFontSize(20)
    context.setFillStyle('black')
    context.fillText('Hello, Canvas!', 50, 170)

    context.draw()
  }
})

在这个示例中，我们创建了一个画布，并在画布上绘制了一个填充的红色矩形、蓝色矩形边框、绿色圆形和黑色文本。通过这些基本操作，可以初步了解如何在微信小程序中使用进行 2D 绘图。