change canvas to 3.2

Signed-off-by: Ntian-wenzhe411 <tianwenzhe2@huawei.com>

validator/acts_validator/src/main/ets/pages/ArkUI/CanvasGlobalAlpha.ets

@@ -43,6 +43,12 @@ struct SetCircle {
             })
             .onActionUpdate((event: GestureEvent) => {
               this.X = event.offsetX;
+              this.context.globalAlpha = (this.X)*0.005;
+              this.context.fillStyle = 'rgb(255,0,0)';
+              this.context.fillRect(150, 150, 50, 50);
+              this.context.globalAlpha = (this.X)*0.005;
+              this.context.fillStyle = 'rgb(0,0,255)';
+              this.context.fillRect(200, 200, 50, 50);
             })
             .onActionEnd(() => {
               console.info('Pan end');
@@ -59,9 +65,10 @@ struct SetCircle {
           .height('100%')
           .backgroundColor('#ffffffff')
           .onReady(() =>{
+            this.context.globalAlpha = 0.05;
             this.context.fillStyle = 'rgb(255,0,0)';
             this.context.fillRect(150, 150, 50, 50);
-            this.context.globalAlpha = (this.X)*0.005;
+            this.context.globalAlpha = 0.05;
             this.context.fillStyle = 'rgb(0,0,255)';
             this.context.fillRect(200, 200, 50, 50);
           })

validator/acts_validator/src/main/ets/pages/ArkUI/CanvasLineDashOffset.ets

@@ -42,6 +42,10 @@ struct SetCircle {
             })
             .onActionUpdate((event: GestureEvent) => {
               this.X = event.offsetX;
+              this.context.arc(180, 150, 50, 0, 6.28);
+              this.context.setLineDash([20,30]);
+              this.context.lineDashOffset = (this.X)*0.02;
+              this.context.stroke();
             })
             .onActionEnd(() => {
               console.info('Pan end');
@@ -49,7 +53,7 @@ struct SetCircle {
           )
       }.width('70%').height('25%')
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-        Text('虚线偏移量: ' + (this.X)*0.1 )
+        Text('虚线偏移量: ' + (this.X)*0.02 )
       }.width('100%').height('20%')
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
         Canvas(this.context)
@@ -59,7 +63,7 @@ struct SetCircle {
           .onReady(() =>{
             this.context.arc(180, 150, 50, 0, 6.28);
             this.context.setLineDash([20,30]);
-            this.context.lineDashOffset = (this.X)*0.1;
+            this.context.lineDashOffset = 0.1;
             this.context.stroke();
           })
       }.width('100%').height('55%')

validator/acts_validator/src/main/ets/pages/ArkUI/CanvasLineWidth.ets

@@ -42,6 +42,8 @@ struct SetCircle {
             })
             .onActionUpdate((event: GestureEvent) => {
               this.X = event.offsetX;
+              this.context.lineWidth = (this.X)*0.1;
+              this.context.strokeRect(120, 120, 120, 120);
             })
             .onActionEnd(() => {
               console.info('Pan end');
@@ -50,7 +52,7 @@ struct SetCircle {
 
       }.width('70%').height('30%')
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-        Text('边框粗细: ' + (this.X)*0.05 )
+        Text('边框粗细: ' + (this.X)*0.1 )
       }.width('100%').height('20%')
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
         Canvas(this.context)
@@ -58,7 +60,7 @@ struct SetCircle {
           .height('100%')
           .backgroundColor('#ffffffff')
           .onReady(() =>{
-            this.context.lineWidth = (this.X)*0.05;
+            this.context.lineWidth = 1;
             this.context.strokeRect(120, 120, 120, 120);
           })
       }.width('100%').height('50%')

validator/acts_validator/src/main/ets/pages/ArkUI/CanvasShadowBlur.ets

@@ -44,6 +44,10 @@ struct SetCircle {
             })
             .onActionUpdate((event: GestureEvent) => {
               this.X = event.offsetX;
+              this.context.shadowBlur = this.X;
+              this.context.shadowColor = 'rgb(0,0,0)';
+              this.context.fillStyle = 'rgb(255,0,0)';
+              this.context.fillRect(150, 150, 100, 100);
             })
             .onActionEnd(() => {
               console.info('Pan end');
@@ -59,7 +63,7 @@ struct SetCircle {
           .height('100%')
           .backgroundColor('#ffffffff')
           .onReady(() =>{
-            this.context.shadowBlur = this.X;
+            this.context.shadowBlur = 0;
             this.context.shadowColor = 'rgb(0,0,0)';
             this.context.fillStyle = 'rgb(255,0,0)';
             this.context.fillRect(150, 150, 100, 100);

validator/acts_validator/src/main/ets/pages/ArkUI/CanvasShadowOffsetX.ets

@@ -45,6 +45,11 @@ struct SetCircle {
             })
             .onActionUpdate((event: GestureEvent) => {
               this.X = event.offsetX;
+              this.context.shadowBlur = 10;
+              this.context.shadowOffsetX = (this.X)*0.05;
+              this.context.shadowColor = 'rgb(0,0,0)';
+              this.context.fillStyle = 'rgb(255,0,0)';
+              this.context.fillRect(150, 150, 100, 100);
             })
             .onActionEnd(() => {
               console.info('Pan end');
@@ -62,7 +67,7 @@ struct SetCircle {
           .backgroundColor('#ffffffff')
           .onReady(() =>{
             this.context.shadowBlur = 10;
-            this.context.shadowOffsetX = (this.X)*0.05;
+            this.context.shadowOffsetX = 0;
             this.context.shadowColor = 'rgb(0,0,0)';
             this.context.fillStyle = 'rgb(255,0,0)';
             this.context.fillRect(150, 150, 100, 100);

validator/acts_validator/src/main/ets/pages/ArkUI/CanvasShadowOffsetY.ets

@@ -45,6 +45,11 @@ struct SetCircle {
             })
             .onActionUpdate((event: GestureEvent) => {
               this.X = event.offsetX;
+              this.context.shadowBlur = 10;
+              this.context.shadowOffsetY = (this.X)*0.05;
+              this.context.shadowColor = 'rgb(0,0,0)';
+              this.context.fillStyle = 'rgb(255,0,0)';
+              this.context.fillRect(150, 150, 100, 100);
             })
             .onActionEnd(() => {
               console.info('Pan end');
@@ -61,7 +66,7 @@ struct SetCircle {
           .backgroundColor('#ffffffff')
           .onReady(() =>{
             this.context.shadowBlur = 10;
-            this.context.shadowOffsetY = (this.X)*0.05;
+            this.context.shadowOffsetY = 0;
             this.context.shadowColor = 'rgb(0,0,0)';
             this.context.fillStyle = 'rgb(255,0,0)';
             this.context.fillRect(150, 150, 100, 100);