diff --git a/zh-cn/application-dev/application-models/arkts-ui-widget-page-custom-drawing.md b/zh-cn/application-dev/application-models/arkts-ui-widget-page-custom-drawing.md
index d956bff234d1ca73a3e1a72256ea01b6099bc7d1..b759f612959fe896f2dc1f8e25b74d13203ec24c 100644
--- a/zh-cn/application-dev/application-models/arkts-ui-widget-page-custom-drawing.md
+++ b/zh-cn/application-dev/application-models/arkts-ui-widget-page-custom-drawing.md
@@ -6,7 +6,7 @@ ArkTS卡片开放了自定义绘制的能力，在卡片上可以通过[Canvas](
 ```ts
 @Entry
 @Component
-struct Card {
+struct WidgetCard {
   private canvasWidth: number = 0;
   private canvasHeight: number = 0;
   // 初始化CanvasRenderingContext2D和RenderingContextSettings
@@ -26,9 +26,9 @@ struct Card {
             this.canvasWidth = this.context.width;
             this.canvasHeight = this.context.height;
             // 绘制画布的背景
-            this.context.fillStyle = 'rgba(203, 154, 126, 1.00)';
+            this.context.fillStyle = '#EEF0FF';
             this.context.fillRect(0, 0, this.canvasWidth, this.canvasHeight);
-            // 在画布的中心绘制一个红色的圆
+            // 在画布的中心绘制一个圆
             this.context.beginPath();
             let radius = this.context.width / 3;
             let circleX = this.context.width / 2;
@@ -36,35 +36,48 @@ struct Card {
             this.context.moveTo(circleX - radius, circleY);
             this.context.arc(circleX, circleY, radius, 2 * Math.PI, 0, true);
             this.context.closePath();
-            this.context.fillStyle = 'red';
+            this.context.fillStyle = '#5A5FFF';
             this.context.fill();
             // 绘制笑脸的左眼
-            let leftR = radius / 4;
-            let leftX = circleX - (radius / 2);
-            let leftY = circleY - (radius / 3.5);
+            let leftR = radius / 13;
+            let leftX = circleX - (radius / 2.3);
+            let leftY = circleY - (radius / 4.5);
             this.context.beginPath();
-            this.context.arc(leftX, leftY, leftR, 0, Math.PI, true);
-            this.context.strokeStyle = '#ffff00';
-            this.context.lineWidth = 10;
+            this.context.arc(leftX, leftY, leftR, 0, 2 * Math.PI, true);
+            this.context.strokeStyle = '#FFFFFF';
+            this.context.lineWidth = 15;
             this.context.stroke();
             // 绘制笑脸的右眼
-            let rightR = radius / 4;
-            let rightX = circleX + (radius / 2);
-            let rightY = circleY - (radius / 3.5);
+            let rightR = radius / 13;
+            let rightX = circleX + (radius / 2.3);
+            let rightY = circleY - (radius / 4.5);
             this.context.beginPath();
-            this.context.arc(rightX, rightY, rightR, 0, Math.PI, true);
-            this.context.strokeStyle = '#ffff00';
-            this.context.lineWidth = 10;
+            this.context.arc(rightX, rightY, rightR, 0, 2 * Math.PI, true);
+            this.context.strokeStyle = '#FFFFFF';
+            this.context.lineWidth = 15;
+            this.context.stroke();
+            // 绘制笑脸的鼻子
+            let startX = circleX;
+            let startY = circleY - 20;
+            this.context.beginPath();
+            this.context.moveTo(startX, startY);
+            this.context.lineTo(startX - 8, startY + 40);
+            this.context.lineTo(startX + 8, startY + 40);
+            this.context.strokeStyle = '#FFFFFF';
+            this.context.lineWidth = 15;
+            this.context.lineCap = 'round'
+            this.context.lineJoin = 'round'
             this.context.stroke();
             // 绘制笑脸的嘴巴
-            let mouthR = radius / 2.5;
+            let mouthR = radius / 2;
             let mouthX = circleX;
-            let mouthY = circleY + (radius / 3);
+            let mouthY = circleY + 10;
             this.context.beginPath();
-            this.context.arc(mouthX, mouthY, mouthR, Math.PI, 0, true);
-            this.context.strokeStyle = '#ffff00';
-            this.context.lineWidth = 10;
+            this.context.arc(mouthX, mouthY, mouthR, Math.PI / 1.4, Math.PI / 3.4, true);
+            this.context.strokeStyle = '#FFFFFF';
+            this.context.lineWidth = 15;
             this.context.stroke();
+            this.context.closePath();
           })
       }
     }.height('100%').width('100%')
@@ -73,4 +86,4 @@ struct Card {
 ```
 
 运行效果如下图所示。  
-![WidgetCanvasDemo](figures/WidgetCanvasDemo.png)
+![WidgetCanvasDemo](figures/WidgetCanvasDemo.jpeg)
\ No newline at end of file
diff --git a/zh-cn/application-dev/application-models/figures/WidgetCanvasDemo.jpeg b/zh-cn/application-dev/application-models/figures/WidgetCanvasDemo.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..3961eba1947c74229e43af53d1ad525af414028f
Binary files /dev/null and b/zh-cn/application-dev/application-models/figures/WidgetCanvasDemo.jpeg differ
diff --git a/zh-cn/application-dev/application-models/figures/WidgetCanvasDemo.png b/zh-cn/application-dev/application-models/figures/WidgetCanvasDemo.png
deleted file mode 100644
index c09c82dd88cf002020990b5b8327701c445eeaaf..0000000000000000000000000000000000000000
Binary files a/zh-cn/application-dev/application-models/figures/WidgetCanvasDemo.png and /dev/null differ