微信小程序中的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 部分

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

JS 部分

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 绘图。