中国优质的IT技术网站
专业IT技术创作平台
IT职业在线教育平台
微信扫码分享
@Entry @Component struct Page240419172038091_bak { private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private screenCenterX: number = 0 private screenCenterY: number = 0 @State sCanLineY: number = 0 build() { Stack({ alignContent: Alignment.Center }) { Image($r("app.media.bg")).width(200) Canvas(this.context).width("100%").height("100%").backgroundColor(Color.Transparent).onReady(() => { let canvasWidth = this.context.width let canvasHeight = this.context.height this.screenCenterX = canvasWidth / 2 this.screenCenterY = canvasHeight / 2 this.context.fillStyle = "#80000000" this.context.beginPath() this.context.moveTo(0, 0) this.context.lineTo(0, this.context.height) this.context.lineTo(this.context.width, this.context.height) this.context.lineTo(this.context.width, 0) this.context.lineTo(0, 0) this.context.fill() this.context.clearRect(this.screenCenterX - 100, this.screenCenterY - 100, 200, 200) this.context.beginPath(); this.context.moveTo(this.screenCenterX, this.screenCenterY) this.context.fillStyle = "#802ac327"; this.context.fillRect(this.screenCenterX - 100, this.screenCenterY - 100, 200, 2) setInterval(() => { this.context.clearRect(this.screenCenterX - 100, this.screenCenterY - 100, 200, 200) if (this.sCanLineY > 197) { this.sCanLineY = 0 } else { this.sCanLineY++ } this.context.fillRect(this.screenCenterX - 100, this.screenCenterY - 100 + this.sCanLineY, 200, 2) }, 8) }) }.width("100%").height("100%") } }