微信小程序中的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): 平移当前绘图。
tran