建设一个地方门户网站,福建省住房城乡建设厅网站,网络服务提供者的侵权责任,供水开发建设公司网站Canvas 组件在鸿蒙应用中用于绘制自定义图形#xff0c;提供丰富的绘制功能和灵活的定制能力。通过 Canvas#xff0c;可以创建矩形、圆形、路径、文本等基础图形#xff0c;为鸿蒙应用增添个性化的视觉效果。本篇将介绍 Canvas 组件的基础操作#xff0c;涵盖绘制矩形、圆…Canvas 组件在鸿蒙应用中用于绘制自定义图形提供丰富的绘制功能和灵活的定制能力。通过 Canvas可以创建矩形、圆形、路径、文本等基础图形为鸿蒙应用增添个性化的视觉效果。本篇将介绍 Canvas 组件的基础操作涵盖绘制矩形、圆形、路径和文本的实例。 关键词
Canvas 组件绘图矩形绘制圆形绘制路径与文本 一、Canvas 组件概述
Canvas 组件是鸿蒙中用于自定义图形绘制的关键组件。通过 Canvas开发者可以绘制多种图形元素包括矩形、圆形、路径和文本满足应用中各种个性化的设计需求。 二、基础图形绘制
2.1 绘制矩形
Canvas 提供了 fillRect 和 strokeRect 方法可以绘制填充矩形和描边矩形。
Entry
Component
struct RectangleCanvasExample {build() {Column() {Canvas(this.context).width(100%).height(500).onReady(() {// 设置填充颜色为蓝色this.context.fillStyle #0000FF;// 绘制填充矩形this.context.fillRect(150, 150, 300, 200);// 设置描边颜色为黑色this.context.strokeStyle #000000;// 设置描边宽度为 5this.context.lineWidth 5;// 绘制描边矩形this.context.strokeRect(150, 150, 300, 200);});}}private context: CanvasRenderingContext2D new CanvasRenderingContext2D();
}效果示例在画布上绘制一个蓝色填充、黑色边框的矩形。 2.2 绘制圆形
使用 arc 方法可以绘制圆形或圆弧通过设置圆心坐标、半径等参数可以实现完整圆形和部分圆弧的绘制。
Entry
Component
struct CircleCanvasExample {build() {Column() {Canvas(this.context).width(100%).height(600).onReady(() {// 设置填充颜色为绿色this.context.fillStyle #00FF00;// 开始绘制路径this.context.beginPath();// 绘制圆形指定圆心坐标、半径、起始角度和结束角度this.context.arc(300, 300, 100, 0, 2 * Math.PI);// 填充圆形this.context.fill();});}}private context: CanvasRenderingContext2D new CanvasRenderingContext2D();
}效果示例在画布上绘制一个绿色填充的圆形。 三、路径绘制
通过 Canvas 中的路径绘制方法可以创建更复杂的自定义图形。可以使用 beginPath、moveTo、lineTo 等方法绘制路径并使用 fill 或 stroke 设置填充或边框样式。
3.1 绘制多边形
以下代码展示了如何在 Canvas 上绘制一个简单的三角形路径。
Entry
Component
struct PathCanvasExample {build() {Column() {Canvas(this.context).width(100%).height(600).onReady(() {// 设置路径边框颜色为红色this.context.strokeStyle #FF0000;// 设置路径边框宽度为 3this.context.lineWidth 5;// 开始绘制路径this.context.beginPath();this.context.moveTo(200, 100); // 顶点 1this.context.lineTo(300, 500); // 顶点 2this.context.lineTo(100, 500); // 顶点 3this.context.closePath(); // 闭合路径// 绘制路径边框this.context.stroke();});}}private context: CanvasRenderingContext2D new CanvasRenderingContext2D();
}效果示例在画布上绘制一个红色边框的三角形路径。 四、文本绘制
在 Canvas 组件中可以通过 fillText 绘制文本适用于显示标题、标注等文字信息。可以设置字体大小、颜色等属性。
4.1 绘制文本
使用 fillText 方法在 Canvas 中绘制文本并设置字体、颜色等样式。
Entry
Component
struct TextCanvasExample {build() {Column() {Canvas(this.context).width(100%).height(100%).onReady(() {// 设置字体样式和大小this.context.font 72px sans-serif;// 设置文本颜色为紫色this.context.fillStyle #800080;// 绘制文本this.context.fillText(Hello HarmonyOS!, 150, 350);});}}private context: CanvasRenderingContext2D new CanvasRenderingContext2D();
}效果示例在画布上绘制一个紫色的文本“Hello HarmonyOS!”。 五、综合绘图实例多图层绘制
以下示例展示了如何在 Canvas 组件中通过组合多个图形来创建更丰富的视觉效果包括矩形、圆形、路径和文本的综合绘制。
Entry
Component
struct ComplexCanvasExample {build() {Column() {Canvas(this.context).width(100%).height(700).onReady(() {// 绘制背景矩形this.context.fillStyle #D3D3D3;this.context.fillRect(0, 0, 300, 400);// 绘制蓝色圆形this.context.fillStyle #0000FF;this.context.beginPath();this.context.arc(150, 100, 70, 0, 2 * Math.PI);this.context.fill();// 绘制黑色文本this.context.font 24px sans-serif;this.context.fillStyle #000000;this.context.fillText(Canvas Demo, 85, 300);// 绘制红色三角形路径this.context.strokeStyle #FF0000;this.context.lineWidth 3;this.context.beginPath();this.context.moveTo(75, 350);this.context.lineTo(225, 350);this.context.lineTo(150, 250);this.context.closePath();this.context.stroke();});}}private context: CanvasRenderingContext2D new CanvasRenderingContext2D();
}效果示例在画布上绘制多层图形效果包括背景矩形、蓝色圆形、黑色文本和红色三角形路径。 小结
本篇详细介绍了鸿蒙 Canvas 组件的基本用法涵盖了矩形、圆形、路径和文本的绘制。通过合理运用这些基础绘图方法开发者可以自由绘制丰富多样的图形效果满足个性化的应用需求。 下一篇预告
在下一篇中将进一步介绍 Canvas 组件的静态进阶应用让 Canvas 绘制更加有趣。 上一篇「Mac畅玩鸿蒙与硬件19」鸿蒙UI组件篇9 - 自定义动画实现
下一篇「Mac畅玩鸿蒙与硬件21」鸿蒙UI组件篇11 - Canvas 组件的静态进阶应用
