1# 卡片使用自定义绘制能力 2 3 4ArkTS卡片开放了自定义绘制的能力，在卡片上可以通过[Canvas](../reference/arkui-ts/ts-components-canvas-canvas.md)组件创建一块画布，然后通过[CanvasRenderingContext2D](../reference/arkui-ts/ts-canvasrenderingcontext2d.md)对象在画布上进行自定义图形的绘制，如下示例代码实现了在画布的中心绘制了一个笑脸。 5 6```ts 7@Entry 8@Component 9struct WidgetCard { 10 private canvasWidth: number = 0; 11 private canvasHeight: number = 0; 12 // 初始化CanvasRenderingContext2D和RenderingContextSettings 13 private settings: RenderingContextSettings = new RenderingContextSettings(true); 14 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 15 16 build() { 17 Column() { 18 Row() { 19 Canvas(this.context) 20 .margin('5%') 21 .width('90%') 22 .height('90%') 23 .onReady(() => { 24 console.info('[ArkTSCard] onReady for canvas draw content'); 25 // 在onReady回调中获取画布的实际宽和高 26 this.canvasWidth = this.context.width; 27 this.canvasHeight = this.context.height; 28 // 绘制画布的背景 29 this.context.fillStyle = '#EEF0FF'; 30 this.context.fillRect(0, 0, this.canvasWidth, this.canvasHeight); 31 // 在画布的中心绘制一个圆 32 this.context.beginPath(); 33 let radius = this.context.width / 3; 34 let circleX = this.context.width / 2; 35 let circleY = this.context.height / 2; 36 this.context.moveTo(circleX - radius, circleY); 37 this.context.arc(circleX, circleY, radius, 2 * Math.PI, 0, true); 38 this.context.closePath(); 39 this.context.fillStyle = '#5A5FFF'; 40 this.context.fill(); 41 // 绘制笑脸的左眼 42 let leftR = radius / 13; 43 let leftX = circleX - (radius / 2.3); 44 let leftY = circleY - (radius / 4.5); 45 this.context.beginPath(); 46 this.context.arc(leftX, leftY, leftR, 0, 2 * Math.PI, true); 47 this.context.strokeStyle = '#FFFFFF'; 48 this.context.lineWidth = 15; 49 this.context.stroke(); 50 // 绘制笑脸的右眼 51 let rightR = radius / 13; 52 let rightX = circleX + (radius / 2.3); 53 let rightY = circleY - (radius / 4.5); 54 this.context.beginPath(); 55 this.context.arc(rightX, rightY, rightR, 0, 2 * Math.PI, true); 56 this.context.strokeStyle = '#FFFFFF'; 57 this.context.lineWidth = 15; 58 this.context.stroke(); 59 // 绘制笑脸的鼻子 60 let startX = circleX; 61 let startY = circleY - 20; 62 this.context.beginPath(); 63 this.context.moveTo(startX, startY); 64 this.context.lineTo(startX - 8, startY + 40); 65 this.context.lineTo(startX + 8, startY + 40); 66 this.context.strokeStyle = '#FFFFFF'; 67 this.context.lineWidth = 15; 68 this.context.lineCap = 'round' 69 this.context.lineJoin = 'round' 70 this.context.stroke(); 71 // 绘制笑脸的嘴巴 72 let mouthR = radius / 2; 73 let mouthX = circleX; 74 let mouthY = circleY + 10; 75 this.context.beginPath(); 76 this.context.arc(mouthX, mouthY, mouthR, Math.PI / 1.4, Math.PI / 3.4, true); 77 this.context.strokeStyle = '#FFFFFF'; 78 this.context.lineWidth = 15; 79 this.context.stroke(); 80 this.context.closePath(); 81 }) 82 } 83 }.height('100%').width('100%') 84 } 85} 86``` 87 88运行效果如下图所示。 89
