画布
收藏我的收藏
收藏所有在 Canvas 中的绘图必须用 JavaScript 完成。
在接下来的示例中如无特殊声明均以 TTML 作为模板，不再重复说明。
<canvas canvas-id="canvas" class="canvas"></canvas>
在接下来的示例中会将 JavaScript 相关代码置于 onLoad 方法中。
const context = tt.createCanvasContext("canvas"); context.setFillStyle("#1aad19"); context.fillRect(10, 10, 10, 10); context.draw();
第一步：创建一个 Canvas 绘图上下文
首先，需创建 Canvas 绘图上下文 CanvasContext 对象。
CanvasContext 是小程序内置对象，提供多种绘图方法：
const context = tt.createCanvasContext("canvas");
第二步：使用 Canvas 绘图上下文进行绘图描述
接下来，定义需在 Canvas 中绘制的内容。
设置填充色为绿色（色号：#1aad19）：
context.setFillStyle("#1aad19");
调用 fillRect(x,y,width,height) 方法绘制矩形，填充颜色为前述色号 #1aad19：
context.fillRect(10, 10, 10, 10);
第三步：画图
调用绘制方法将定义的内容渲染至 Canvas 组件。
context.draw();
