• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2022 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
16import router from '@ohos.router';
17
18@Entry
19@Component
20struct ShadowOffsetExample {
21  private settings: RenderingContextSettings = new RenderingContextSettings(true)
22  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
23
24  build() {
25    Row() {
26      Column() {
27        Canvas(this.context)
28          .width(600).height('40%').backgroundColor('#00ffff')
29        Row() {
30          Button('shadowOffsetY')
31            .width(130).height(45)
32            .key('shadowOffsetY')
33            .onClick(() => {
34              this.context.restore();
35              this.context.shadowBlur = 30;
36              this.context.shadowOffsetY = 20;
37              this.context.shadowColor = 'rgb(0,0,0)'
38              this.context.fillStyle = 'rgb(255,0,0)';
39              this.context.fillRect(30, 150, 100, 100);
40              this.context.save();
41            })
42          Button('shadowOffsetX')
43            .width(130).height(45)
44            .key('shadowOffsetX')
45            .onClick(() => {
46              this.context.restore();
47              this.context.shadowBlur = 30;
48              this.context.shadowOffsetX = 20;
49              this.context.shadowColor = 'rgb(0,0,0)'
50              this.context.fillStyle = 'rgb(255,0,0)';
51              this.context.fillRect(150, 50, 100, 100);
52              this.context.save();
53            })
54          Button('shadowBlur')
55            .width(130).height(45)
56            .key('shadowBlur')
57            .onClick(() => {
58              this.context.restore();
59              this.context.shadowBlur = 50;
60              this.context.shadowColor = 'rgb(0,0,0)'
61              this.context.fillStyle = 'rgb(255,0,0)';
62              this.context.fillRect(250, 170, 100, 100);
63              this.context.save();
64            })
65        }.margin({ top: 10 })
66        .width('100%')
67        .justifyContent(FlexAlign.SpaceAround)
68
69        Button('back')
70          .width(130)
71          .height(45)
72          .key('back')
73          .backgroundColor(Color.Orange)
74          .onClick(() => {
75            router.back()
76          })
77          .margin({ top: 10 })
78      }
79      .width('100%')
80    }
81    .height('100%')
82  }
83}