1/* 2 * Copyright (c) 2023-2025 Huawei Device Co., Ltd. 3 * Licensed under the Apache License, Version 2.0 (the "License"); 4 * you may not use this file except in compliance with the License. 5 * You may obtain a copy of the License at 6 * 7 * http://www.apache.org/licenses/LICENSE-2.0 8 * 9 * Unless required by applicable law or agreed to in writing, software 10 * distributed under the License is distributed on an "AS IS" BASIS, 11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 * See the License for the specific language governing permissions and 13 * limitations under the License. 14 */ 15 16// [Start canvas_card] 17@Entry 18@Component 19struct CanvasCard { 20 private canvasWidth: number = 0; 21 private canvasHeight: number = 0; 22 // 初始化CanvasRenderingContext2D和RenderingContextSettings 23 private settings: RenderingContextSettings = new RenderingContextSettings(true); 24 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 25 26 build() { 27 Column() { 28 Row() { 29 Canvas(this.context) 30 .margin('5%') 31 .width('90%') 32 .height('90%') 33 .onReady(() => { 34 console.info('[ArkTSCard] onReady for canvas draw content'); 35 // 在onReady回调中获取画布的实际宽和高 36 this.canvasWidth = this.context.width; 37 this.canvasHeight = this.context.height; 38 // 绘制画布的背景 39 this.context.fillStyle = '#EEF0FF'; 40 this.context.fillRect(0, 0, this.canvasWidth, this.canvasHeight); 41 // 在画布的中心绘制一个圆 42 this.context.beginPath(); 43 let radius = this.context.width / 3; 44 let circleX = this.context.width / 2; 45 let circleY = this.context.height / 2; 46 this.context.moveTo(circleX - radius, circleY); 47 this.context.arc(circleX, circleY, radius, 2 * Math.PI, 0, true); 48 this.context.closePath(); 49 this.context.fillStyle = '#5A5FFF'; 50 this.context.fill(); 51 // 绘制笑脸的左眼 52 let leftR = radius / 13; 53 let leftX = circleX - (radius / 2.3); 54 let leftY = circleY - (radius / 4.5); 55 this.context.beginPath(); 56 this.context.arc(leftX, leftY, leftR, 0, 2 * Math.PI, true); 57 this.context.strokeStyle = '#FFFFFF'; 58 this.context.lineWidth = 15; 59 this.context.stroke(); 60 // 绘制笑脸的右眼 61 let rightR = radius / 13; 62 let rightX = circleX + (radius / 2.3); 63 let rightY = circleY - (radius / 4.5); 64 this.context.beginPath(); 65 this.context.arc(rightX, rightY, rightR, 0, 2 * Math.PI, true); 66 this.context.strokeStyle = '#FFFFFF'; 67 this.context.lineWidth = 15; 68 this.context.stroke(); 69 // 绘制笑脸的鼻子 70 let startX = circleX; 71 let startY = circleY - 20; 72 this.context.beginPath(); 73 this.context.moveTo(startX, startY); 74 this.context.lineTo(startX - 8, startY + 40); 75 this.context.lineTo(startX + 8, startY + 40); 76 this.context.strokeStyle = '#FFFFFF'; 77 this.context.lineWidth = 15; 78 this.context.lineCap = 'round' 79 this.context.lineJoin = 'round' 80 this.context.stroke(); 81 // 绘制笑脸的嘴巴 82 let mouthR = radius / 2; 83 let mouthX = circleX; 84 let mouthY = circleY + 10; 85 this.context.beginPath(); 86 this.context.arc(mouthX, mouthY, mouthR, Math.PI / 1.4, Math.PI / 3.4, true); 87 this.context.strokeStyle = '#FFFFFF'; 88 this.context.lineWidth = 15; 89 this.context.stroke(); 90 this.context.closePath(); 91 }) 92 } 93 }.height('100%').width('100%') 94 } 95} 96// [End canvas_card]