首先，我们利用 #333 填充了一个背景矩形。矩形的起始点位于原点，长度和宽度分别绑定到画布的长度和宽度。接下来定义阴影的属性。最后，我们设置文本字体为 80 像素加粗的 sans-serif，会绘制了“Earth”单词。代码运行结果如下所示：
canvas 阴影
注意观察字母旁边的发光效果，这其实是使用阴影制作的。

图像

Canvas元素支持从多种源绘制图像。为了绘制图像，需要首先加载图像；使用Component.onCompleted事件处理函数可以达到这一目的：

onPaint: { var ctx = getContext("2d") // 绘制图像 ctx.drawImage('assets/earth.png', 10, 10) // 保存当前状态 ctx.save() // 平移坐标系 ctx.translate(100,0) ctx.strokeStyle = 'red' // 创建裁剪范围 ctx.beginPath() ctx.moveTo(10,10) ctx.lineTo(55,10) ctx.lineTo(35,55) ctx.closePath() ctx.clip() // 根据路径裁剪 // 绘制图像并应用裁剪 ctx.drawImage('assets/earth.png', 10, 10) // 绘制路径 ctx.stroke() // 恢复状态 ctx.restore() } Component.onCompleted: { loadImage("assets/earth.png") }

代码运行结果如下：
canvas image
左侧的地球图像绘制在左上角坐标为 (10, 10) 的位置；右侧的图像应用了路径裁剪。图像和路径都可以被另外的路径裁剪，只需使用clip()函数即可。调用该函数之后，所有的绘制都将限制在这个路径中，也就是所谓“裁剪”。裁剪会在恢复上次状态时被取消。

上一篇： 下一篇：