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 */ 15import router from '@ohos.router'; 16 17@Entry 18@Component 19struct AllRenderingExample { 20 private settings: RenderingContextSettings = new RenderingContextSettings(true) 21 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 22 23 build() { 24 Column() { 25 Canvas(this.context) 26 .width('100%') 27 .height(300) 28 .backgroundColor('#00ffff') 29 .padding({ left: 12, right: 12 }) 30 Row() { 31 Button('strokeStyle') 32 .key('strokeStyle') 33 .width(130).height(45) 34 .onClick(() => { 35 this.context.beginPath(); 36 this.context.lineWidth = 2; 37 this.context.strokeStyle = '#0000ff' 38 this.context.strokeRect(50, 20, 100, 100) 39 }) 40 Button('lineCap') 41 .key('lineCap') 42 .width(130).height(45) 43 .onClick(() => { 44 this.context.restore(); 45 this.context.lineWidth = 6; 46 this.context.beginPath(); 47 this.context.lineCap = 'round'; 48 this.context.moveTo(200, 80); 49 this.context.lineTo(240, 80); 50 this.context.stroke(); 51 this.context.save(); 52 }) 53 54 }.margin({ top: 10 }) 55 .width('100%') 56 .justifyContent(FlexAlign.SpaceAround) 57 58 Row() { 59 Button('globalAlpha') 60 .key('globalAlpha') 61 .width(130).height(45) 62 .onClick(() => { 63 this.context.restore(); 64 this.context.fillStyle = 'rgb(255,0,0)'; 65 this.context.fillRect(50, 20, 50, 50); 66 this.context.globalAlpha = 0.4; 67 this.context.fillStyle = 'rgb(0,0,255)'; 68 this.context.fillRect(100, 70, 50, 50); 69 this.context.save(); 70 }) 71 Button('textAlign') 72 .key('textAlign') 73 .width(130).height(45) 74 .onClick(() => { 75 this.context.restore(); 76 this.context.lineWidth = 3; 77 this.context.moveTo(300, 120); 78 this.context.lineTo(300, 280); 79 this.context.stroke(); 80 this.context.font = '50px sans-serif'; 81 this.context.textAlign = 'start' 82 this.context.fillText('start', 300, 120) 83 this.context.textAlign = 'end' 84 this.context.fillText('end', 300, 150); 85 this.context.textAlign = 'left' 86 this.context.fillText('left', 300, 180); 87 this.context.textAlign = 'center' 88 this.context.fillText('center', 300, 210); 89 this.context.textAlign = 'right' 90 this.context.fillText('right', 300, 240); 91 this.context.save(); 92 }) 93 }.margin({ top: 10 }) 94 .width('100%') 95 .justifyContent(FlexAlign.SpaceAround) 96 97 Row() { 98 Button('lineJoin') 99 .key('lineJoin') 100 .width(130).height(45) 101 .onClick(() => { 102 this.context.restore(); 103 this.context.beginPath(); 104 this.context.lineWidth = 2; 105 this.context.lineWidth = 2; 106 this.context.lineJoin = 'miter'; 107 this.context.moveTo(240, 40); 108 this.context.lineTo(280, 80); 109 this.context.lineTo(240, 120); 110 this.context.stroke(); 111 this.context.save(); 112 }) 113 Button('miterLimit') 114 .key('miterLimit') 115 .width(130).height(45) 116 .onClick(() => { 117 this.context.restore(); 118 this.context.lineWidth = 6; 119 this.context.lineJoin = 'miter'; 120 this.context.miterLimit = 3; 121 this.context.moveTo(50, 230); 122 this.context.lineTo(80, 250); 123 this.context.lineTo(50, 270); 124 this.context.stroke(); 125 this.context.save(); 126 }) 127 }.margin({ top: 10 }) 128 .width('100%') 129 .justifyContent(FlexAlign.SpaceAround) 130 131 Row() { 132 Button('globalCompositeOperation') 133 .key('globalCompositeOperation') 134 .width(130).height(45) 135 .onClick(() => { 136 this.context.restore(); 137 this.context.fillStyle = 'rgb(255,0,0)'; 138 this.context.fillRect(20, 140, 50, 50); 139 this.context.globalCompositeOperation = 'source-over' 140 this.context.fillStyle = 'rgb(0,0,255)'; 141 this.context.fillRect(40, 160, 50, 50); 142 143 this.context.fillStyle = 'rgb(255,0,0)'; 144 this.context.fillRect(100, 140, 50, 50); 145 this.context.globalCompositeOperation = 'destination-over' 146 this.context.fillStyle = 'rgb(0,0,255)'; 147 this.context.fillRect(140, 160, 50, 50); 148 this.context.save(); 149 }) 150 Button('delete') 151 .key('delete') 152 .width(130).height(45) 153 .onClick(() => { 154 this.context.clearRect(0, 0, 950, 950) 155 }) 156 157 }.margin({ top: 10 }) 158 .width('100%') 159 .justifyContent(FlexAlign.SpaceAround) 160 161 Row() { 162 Button('back') 163 .key('back') 164 .width(130) 165 .height(45) 166 .backgroundColor(Color.Orange) 167 .onClick(() => { 168 router.back() 169 }) 170 }.margin({ top: 10 }) 171 .width('100%') 172 .justifyContent(FlexAlign.SpaceAround) 173 } 174 .alignItems(HorizontalAlign.Center) 175 .justifyContent(FlexAlign.Center) 176 .width('100%') 177 .height('100%') 178 } 179}