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@Entry 17@Component 18struct CanvasCard { 19 private canvasWidth: number = 0; 20 private canvasHeight: number = 0; 21 // 初始化CanvasRenderingContext2D和RenderingContextSettings 22 private settings: RenderingContextSettings = new RenderingContextSettings(true); 23 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 24 25 build() { 26 Column() { 27 Row() { 28 Canvas(this.context) 29 .margin('5%') 30 .width('90%') 31 .height('90%') 32 .onReady(() => { 33 console.info('[ArkTSCard] onReady for canvas draw content'); 34 // 在onReady回调中获取画布的实际宽和高 35 this.canvasWidth = this.context.width; 36 this.canvasHeight = this.context.height; 37 // 绘制画布的背景 38 this.context.fillStyle = '#EEF0FF'; 39 this.context.fillRect(0, 0, this.canvasWidth, this.canvasHeight); 40 // 在画布的中心绘制一个圆 41 this.context.beginPath(); 42 let radius = this.context.width / 3; 43 let circleX = this.context.width / 2; 44 let circleY = this.context.height / 2; 45 this.context.moveTo(circleX - radius, circleY); 46 this.context.arc(circleX, circleY, radius, 2 * Math.PI, 0, true); 47 this.context.closePath(); 48 this.context.fillStyle = '#5A5FFF'; 49 this.context.fill(); 50 // 绘制笑脸的左眼 51 let leftR = radius / 13; 52 let leftX = circleX - (radius / 2.3); 53 let leftY = circleY - (radius / 4.5); 54 this.context.beginPath(); 55 this.context.arc(leftX, leftY, leftR, 0, 2 * Math.PI, true); 56 this.context.strokeStyle = '#FFFFFF'; 57 this.context.lineWidth = 15; 58 this.context.stroke(); 59 // 绘制笑脸的右眼 60 let rightR = radius / 13; 61 let rightX = circleX + (radius / 2.3); 62 let rightY = circleY - (radius / 4.5); 63 this.context.beginPath(); 64 this.context.arc(rightX, rightY, rightR, 0, 2 * Math.PI, true); 65 this.context.strokeStyle = '#FFFFFF'; 66 this.context.lineWidth = 15; 67 this.context.stroke(); 68 // 绘制笑脸的鼻子 69 let startX = circleX; 70 let startY = circleY - 20; 71 this.context.beginPath(); 72 this.context.moveTo(startX, startY); 73 this.context.lineTo(startX - 8, startY + 40); 74 this.context.lineTo(startX + 8, startY + 40); 75 this.context.strokeStyle = '#FFFFFF'; 76 this.context.lineWidth = 15; 77 this.context.lineCap = 'round' 78 this.context.lineJoin = 'round' 79 this.context.stroke(); 80 // 绘制笑脸的嘴巴 81 let mouthR = radius / 2; 82 let mouthX = circleX; 83 let mouthY = circleY + 10; 84 this.context.beginPath(); 85 this.context.arc(mouthX, mouthY, mouthR, Math.PI / 1.4, Math.PI / 3.4, true); 86 this.context.strokeStyle = '#FFFFFF'; 87 this.context.lineWidth = 15; 88 this.context.stroke(); 89 this.context.closePath(); 90 }) 91 } 92 }.height('100%').width('100%') 93 } 94}