提交 a64c6ca8 编写于 作者: L lanyill

Canvas 文档格式整改

Signed-off-by: Nlanyill <lanyi3@huawei.com>
上级 150dcb48
...@@ -77,7 +77,7 @@ struct FillStyleExample { ...@@ -77,7 +77,7 @@ struct FillStyleExample {
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
this.context.fillStyle = '#0000ff' this.context.fillStyle = '#0000ff'
this.context.fillRect(20, 160, 150, 100) this.context.fillRect(20, 20, 150, 100)
}) })
} }
.width('100%') .width('100%')
...@@ -1653,35 +1653,35 @@ clip(path: Path2D, fillRule?: CanvasFillRule): void ...@@ -1653,35 +1653,35 @@ clip(path: Path2D, fillRule?: CanvasFillRule): void
```ts ```ts
// xxx.ets // xxx.ets
@Entry @Entry
@Component @Component
struct Clip { struct Clip {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context) Canvas(this.context)
.width('100%') .width('100%')
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
let region = new Path2D() let region = new Path2D()
region.moveTo(30, 90) region.moveTo(30, 90)
region.lineTo(110, 20) region.lineTo(110, 20)
region.lineTo(240, 130) region.lineTo(240, 130)
region.lineTo(60, 130) region.lineTo(60, 130)
region.lineTo(190, 20) region.lineTo(190, 20)
region.lineTo(270, 90) region.lineTo(270, 90)
region.closePath() region.closePath()
this.context.clip(region,"evenodd") this.context.clip(region,"evenodd")
this.context.fillStyle = "rgb(0,255,0)" this.context.fillStyle = "rgb(0,255,0)"
this.context.fillRect(0, 0, this.context.width, this.context.height) this.context.fillRect(0, 0, this.context.width, this.context.height)
}) })
}
.width('100%')
.height('100%')
} }
.width('100%')
.height('100%')
} }
}
``` ```
![zh-cn_image_000000127777779](figures/zh-cn_image_000000127777779.png) ![zh-cn_image_000000127777779](figures/zh-cn_image_000000127777779.png)
...@@ -2104,29 +2104,29 @@ getImageData(sx: number, sy: number, sw: number, sh: number): ImageData ...@@ -2104,29 +2104,29 @@ getImageData(sx: number, sy: number, sw: number, sh: number): ImageData
```ts ```ts
// xxx.ets // xxx.ets
@Entry @Entry
@Component @Component
struct GetImageData { struct GetImageData {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private img:ImageBitmap = new ImageBitmap("/common/images/1234.png") private img:ImageBitmap = new ImageBitmap("/common/images/1234.png")
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context) Canvas(this.context)
.width('100%') .width('100%')
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
this.context.drawImage(this.img,0,0,130,130) this.context.drawImage(this.img,0,0,130,130)
var imagedata = this.context.getImageData(50,50,130,130) var imagedata = this.context.getImageData(50,50,130,130)
this.context.putImageData(imagedata,150,150) this.context.putImageData(imagedata,150,150)
}) })
}
.width('100%')
.height('100%')
} }
.width('100%')
.height('100%')
} }
}
``` ```
![zh-cn_image_000000127777780](figures/zh-cn_image_000000127777780.png) ![zh-cn_image_000000127777780](figures/zh-cn_image_000000127777780.png)
...@@ -2248,40 +2248,40 @@ getLineDash(): number[] ...@@ -2248,40 +2248,40 @@ getLineDash(): number[]
```ts ```ts
// xxx.ets // xxx.ets
@Entry @Entry
@Component @Component
struct CanvasGetLineDash { struct CanvasGetLineDash {
@State message: string = 'Hello World' @State message: string = 'Hello World'
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Row() { Row() {
Column() { Column() {
Text(this.message) Text(this.message)
.fontSize(50) .fontSize(50)
.fontWeight(FontWeight.Bold) .fontWeight(FontWeight.Bold)
.onClick(()=>{ .onClick(()=>{
console.error('before getlinedash clicked') console.error('before getlinedash clicked')
let res = this.context.getLineDash() let res = this.context.getLineDash()
console.error(JSON.stringify(res)) console.error(JSON.stringify(res))
}) })
Canvas(this.context) Canvas(this.context)
.width('100%') .width('100%')
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() => { .onReady(() => {
this.context.arc(100, 75, 50, 0, 6.28) this.context.arc(100, 75, 50, 0, 6.28)
this.context.setLineDash([10,20]) this.context.setLineDash([10,20])
this.context.stroke() this.context.stroke()
let res = this.context.getLineDash() let res = this.context.getLineDash()
}) })
}
.width('100%')
} }
.width('100%') .height('100%')
} }
.height('100%')
} }
}
``` ```
![zh-cn_image_000000127777778](figures/zh-cn_image_000000127777778.png) ![zh-cn_image_000000127777778](figures/zh-cn_image_000000127777778.png)
...@@ -2376,26 +2376,26 @@ toDataURL(type?: string, quality?: number): string ...@@ -2376,26 +2376,26 @@ toDataURL(type?: string, quality?: number): string
```ts ```ts
// xxx.ets // xxx.ets
@Entry @Entry
@Component @Component
struct ToDataURL { struct ToDataURL {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context) Canvas(this.context)
.width('100%') .width('100%')
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
var dataURL = this.context.toDataURL() var dataURL = this.context.toDataURL()
}) })
}
.width('100%')
.height('100%')
} }
.width('100%')
.height('100%')
} }
}
``` ```
...@@ -2512,7 +2512,7 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void ...@@ -2512,7 +2512,7 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void
grad.addColorStop(0.5, '#ffffff') grad.addColorStop(0.5, '#ffffff')
grad.addColorStop(1.0, '#00ff00') grad.addColorStop(1.0, '#00ff00')
this.context.fillStyle = grad this.context.fillStyle = grad
this.context.fillRect(0, 0, 500, 500) this.context.fillRect(0, 0, 400, 400)
}) })
} }
.width('100%') .width('100%')
...@@ -2563,7 +2563,7 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, ...@@ -2563,7 +2563,7 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number,
grad.addColorStop(0.5, '#ffffff') grad.addColorStop(0.5, '#ffffff')
grad.addColorStop(1.0, '#00ff00') grad.addColorStop(1.0, '#00ff00')
this.context.fillStyle = grad this.context.fillStyle = grad
this.context.fillRect(0, 0, 500, 500) this.context.fillRect(0, 0, 440, 440)
}) })
} }
.width('100%') .width('100%')
......
...@@ -47,7 +47,7 @@ struct Page45 { ...@@ -47,7 +47,7 @@ struct Page45 {
grad.addColorStop(0.5, '#ffffff') grad.addColorStop(0.5, '#ffffff')
grad.addColorStop(1.0, '#00ff00') grad.addColorStop(1.0, '#00ff00')
this.context.fillStyle = grad this.context.fillStyle = grad
this.context.fillRect(0, 0, 500, 500) this.context.fillRect(0, 0, 400, 400)
}) })
} }
.width('100%') .width('100%')
......
...@@ -24,29 +24,29 @@ ImageData对象可以存储canvas渲染的像素数据。 ...@@ -24,29 +24,29 @@ ImageData对象可以存储canvas渲染的像素数据。
```ts ```ts
// xxx.ets // xxx.ets
@Entry @Entry
@Component @Component
struct Translate { struct Translate {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private img:ImageBitmap = new ImageBitmap("/common/images/1234.png") private img:ImageBitmap = new ImageBitmap("common/images/1234.png")
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context) Canvas(this.context)
.width('100%') .width('100%')
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
this.context.drawImage(this.img,0,0,130,130) this.context.drawImage(this.img,0,0,130,130)
var imagedata = this.context.getImageData(50,50,130,130) var imagedata = this.context.getImageData(50,50,130,130)
this.context.putImageData(imagedata,150,150) this.context.putImageData(imagedata,150,150)
}) })
}
.width('100%')
.height('100%')
} }
.width('100%')
.height('100%')
} }
}
``` ```
![zh-cn_image_000000127777780](figures/zh-cn_image_000000127777780.png) ![zh-cn_image_000000127777780](figures/zh-cn_image_000000127777780.png)
......
# Path2D对象 # Path2D对象
路径对象,支持通过对象的接口进行路径的描述,并通过Canvas的stroke接口进行绘制。 路径对象,支持通过对象的接口进行路径的描述,并通过Canvas的stroke接口或者fill接口进行绘制。
> **说明:** > **说明:**
> >
......
...@@ -66,7 +66,7 @@ struct FillStyleExample { ...@@ -66,7 +66,7 @@ struct FillStyleExample {
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
this.offContext.fillStyle = '#0000ff' this.offContext.fillStyle = '#0000ff'
this.offContext.fillRect(20, 160, 150, 100) this.offContext.fillRect(20, 20, 150, 100)
var image = this.offContext.transferToImageBitmap() var image = this.offContext.transferToImageBitmap()
this.context.transferFromImageBitmap(image) this.context.transferFromImageBitmap(image)
}) })
...@@ -1752,39 +1752,39 @@ clip(path:Path2D, fillRule?: CanvasFillRule): void ...@@ -1752,39 +1752,39 @@ clip(path:Path2D, fillRule?: CanvasFillRule): void
```ts ```ts
// xxx.ets // xxx.ets
@Entry @Entry
@Component @Component
struct Clip { struct Clip {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context) Canvas(this.context)
.width('100%') .width('100%')
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
let region = new Path2D() let region = new Path2D()
region.moveTo(30, 90) region.moveTo(30, 90)
region.lineTo(110, 20) region.lineTo(110, 20)
region.lineTo(240, 130) region.lineTo(240, 130)
region.lineTo(60, 130) region.lineTo(60, 130)
region.lineTo(190, 20) region.lineTo(190, 20)
region.lineTo(270, 90) region.lineTo(270, 90)
region.closePath() region.closePath()
this.offContext.clip(region,"evenodd") this.offContext.clip(region,"evenodd")
this.offContext.fillStyle = "rgb(0,255,0)" this.offContext.fillStyle = "rgb(0,255,0)"
this.offContext.fillRect(0, 0, 600, 600) this.offContext.fillRect(0, 0, 600, 600)
var image = this.offContext.transferToImageBitmap() var image = this.offContext.transferToImageBitmap()
this.context.transferFromImageBitmap(image) this.context.transferFromImageBitmap(image)
}) })
}
.width('100%')
.height('100%')
} }
.width('100%')
.height('100%')
} }
}
``` ```
![zh-cn_image_000000127777779](figures/zh-cn_image_000000127777779.png) ![zh-cn_image_000000127777779](figures/zh-cn_image_000000127777779.png)
...@@ -2189,6 +2189,27 @@ getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap ...@@ -2189,6 +2189,27 @@ getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap
| ---------------------------------------- | ------------ | | ---------------------------------------- | ------------ |
| [PixelMap](../apis/js-apis-image.md#pixelmap7) | 新的PixelMap对象 | | [PixelMap](../apis/js-apis-image.md#pixelmap7) | 新的PixelMap对象 |
### setPixelMap
setPixelMap(value?: PixelMap): void
将当前传入[PixelMap](../apis/js-apis-image.md#pixelmap7)对象绘制在画布上。
**参数:**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | --------------- |
| sx | number | 是 | 0 | 需要输出的区域的左上角x坐标。 |
| sy | number | 是 | 0 | 需要输出的区域的左上角y坐标。 |
| sw | number | 是 | 0 | 需要输出的区域的宽度。 |
| sh | number | 是 | 0 | 需要输出的区域的高度。 |
**返回值:**
| 类型 | 说明 |
| ---------------------------------------- | ------------ |
| [PixelMap](../apis/js-apis-image.md#pixelmap7) | 新的PixelMap对象 |
### getImageData ### getImageData
...@@ -2216,32 +2237,32 @@ getImageData(sx: number, sy: number, sw: number, sh: number): ImageData ...@@ -2216,32 +2237,32 @@ getImageData(sx: number, sy: number, sw: number, sh: number): ImageData
```ts ```ts
// xxx.ets // xxx.ets
@Entry @Entry
@Component @Component
struct GetImageData { struct GetImageData {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
private img:ImageBitmap = new ImageBitmap("/common/images/1234.png") private img:ImageBitmap = new ImageBitmap("/common/images/1234.png")
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context) Canvas(this.context)
.width('100%') .width('100%')
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
this.offContext.drawImage(this.img,0,0,130,130) this.offContext.drawImage(this.img,0,0,130,130)
var imagedata = this.offContext.getImageData(50,50,130,130) var imagedata = this.offContext.getImageData(50,50,130,130)
this.offContext.putImageData(imagedata,150,150) this.offContext.putImageData(imagedata,150,150)
var image = this.offContext.transferToImageBitmap() var image = this.offContext.transferToImageBitmap()
this.context.transferFromImageBitmap(image) this.context.transferFromImageBitmap(image)
}) })
}
.width('100%')
.height('100%')
} }
.width('100%')
.height('100%')
} }
}
``` ```
![zh-cn_image_000000127777780](figures/zh-cn_image_000000127777780.png) ![zh-cn_image_000000127777780](figures/zh-cn_image_000000127777780.png)
...@@ -2319,31 +2340,31 @@ setLineDash(segments: number[]): void ...@@ -2319,31 +2340,31 @@ setLineDash(segments: number[]): void
**示例:** **示例:**
```ts ```ts
@Entry @Entry
@Component @Component
struct SetLineDash { struct SetLineDash {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context) Canvas(this.context)
.width('100%') .width('100%')
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
this.offContext.arc(100, 75, 50, 0, 6.28) this.offContext.arc(100, 75, 50, 0, 6.28)
this.offContext.setLineDash([10,20]) this.offContext.setLineDash([10,20])
this.offContext.stroke() this.offContext.stroke()
var image = this.offContext.transferToImageBitmap() var image = this.offContext.transferToImageBitmap()
this.context.transferFromImageBitmap(image) this.context.transferFromImageBitmap(image)
}) })
}
.width('100%')
.height('100%')
} }
.width('100%')
.height('100%')
} }
}
``` ```
![zh-cn_image_000000127777772](figures/zh-cn_image_000000127777772.png) ![zh-cn_image_000000127777772](figures/zh-cn_image_000000127777772.png)
...@@ -2364,42 +2385,42 @@ getLineDash(): number[] ...@@ -2364,42 +2385,42 @@ getLineDash(): number[]
```ts ```ts
// xxx.ets // xxx.ets
@Entry @Entry
@Component @Component
struct OffscreenCanvasGetLineDash { struct OffscreenCanvasGetLineDash {
@State message: string = 'Hello World' @State message: string = 'Hello World'
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
build() { build() {
Row() { Row() {
Column() { Column() {
Text(this.message) Text(this.message)
.fontSize(50) .fontSize(50)
.fontWeight(FontWeight.Bold) .fontWeight(FontWeight.Bold)
.onClick(()=>{ .onClick(()=>{
console.error('before getlinedash clicked') console.error('before getlinedash clicked')
let res = this.offContext.getLineDash() let res = this.offContext.getLineDash()
console.error(JSON.stringify(res)) console.error(JSON.stringify(res))
}) })
Canvas(this.context) Canvas(this.context)
.width('100%') .width('100%')
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() => { .onReady(() => {
this.offContext.arc(100, 75, 50, 0, 6.28) this.offContext.arc(100, 75, 50, 0, 6.28)
this.offContext.setLineDash([10,20]) this.offContext.setLineDash([10,20])
this.offContext.stroke() this.offContext.stroke()
let res = this.offContext.getLineDash() let res = this.offContext.getLineDash()
var image = this.offContext.transferToImageBitmap() var image = this.offContext.transferToImageBitmap()
this.context.transferFromImageBitmap(image) this.context.transferFromImageBitmap(image)
}) })
}
.width('100%')
} }
.width('100%') .height('100%')
} }
.height('100%')
} }
}
``` ```
![zh-cn_image_000000127777778](figures/zh-cn_image_000000127777778.png) ![zh-cn_image_000000127777778](figures/zh-cn_image_000000127777778.png)
...@@ -2429,28 +2450,28 @@ toDataURL(type?: string, quality?: number): string ...@@ -2429,28 +2450,28 @@ toDataURL(type?: string, quality?: number): string
**示例:** **示例:**
```ts ```ts
// xxx.ets // xxx.ets
@Entry @Entry
@Component @Component
struct ToDataURL { struct ToDataURL {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context) Canvas(this.context)
.width('100%') .width('100%')
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
var dataURL = this.offContext.toDataURL() var dataURL = this.offContext.toDataURL()
}) })
}
.width('100%')
.height('100%')
} }
.width('100%')
.height('100%')
} }
}
``` ```
...@@ -2527,33 +2548,33 @@ restore(): void ...@@ -2527,33 +2548,33 @@ restore(): void
```ts ```ts
// xxx.ets // xxx.ets
@Entry @Entry
@Component @Component
struct CanvasExample { struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context) Canvas(this.context)
.width('100%') .width('100%')
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
this.offContext.save() // save the default state this.offContext.save() // save the default state
this.offContext.fillStyle = "#00ff00" this.offContext.fillStyle = "#00ff00"
this.offContext.fillRect(20, 20, 100, 100) this.offContext.fillRect(20, 20, 100, 100)
this.offContext.restore() // restore to the default state this.offContext.restore() // restore to the default state
this.offContext.fillRect(150, 75, 100, 100) this.offContext.fillRect(150, 75, 100, 100)
var image = this.offContext.transferToImageBitmap() var image = this.offContext.transferToImageBitmap()
this.context.transferFromImageBitmap(image) this.context.transferFromImageBitmap(image)
}) })
}
.width('100%')
.height('100%')
} }
.width('100%')
.height('100%')
} }
}
``` ```
![zh-cn_image_000000127777781](figures/zh-cn_image_000000127777781.png) ![zh-cn_image_000000127777781](figures/zh-cn_image_000000127777781.png)
...@@ -2568,33 +2589,33 @@ save(): void ...@@ -2568,33 +2589,33 @@ save(): void
```ts ```ts
// xxx.ets // xxx.ets
@Entry @Entry
@Component @Component
struct CanvasExample { struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context) Canvas(this.context)
.width('100%') .width('100%')
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
this.offContext.save() // save the default state this.offContext.save() // save the default state
this.offContext.fillStyle = "#00ff00" this.offContext.fillStyle = "#00ff00"
this.offContext.fillRect(20, 20, 100, 100) this.offContext.fillRect(20, 20, 100, 100)
this.offContext.restore() // restore to the default state this.offContext.restore() // restore to the default state
this.offContext.fillRect(150, 75, 100, 100) this.offContext.fillRect(150, 75, 100, 100)
var image = this.offContext.transferToImageBitmap() var image = this.offContext.transferToImageBitmap()
this.context.transferFromImageBitmap(image) this.context.transferFromImageBitmap(image)
}) })
}
.width('100%')
.height('100%')
} }
.width('100%')
.height('100%')
} }
}
``` ```
![zh-cn_image_000000127777781](figures/zh-cn_image_000000127777781.png) ![zh-cn_image_000000127777781](figures/zh-cn_image_000000127777781.png)
...@@ -2637,7 +2658,7 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void ...@@ -2637,7 +2658,7 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void
grad.addColorStop(0.5, '#ffffff') grad.addColorStop(0.5, '#ffffff')
grad.addColorStop(1.0, '#00ff00') grad.addColorStop(1.0, '#00ff00')
this.offContext.fillStyle = grad this.offContext.fillStyle = grad
this.offContext.fillRect(0, 0, 500, 500) this.offContext.fillRect(0, 0, 400, 400)
var image = this.offContext.transferToImageBitmap() var image = this.offContext.transferToImageBitmap()
this.context.transferFromImageBitmap(image) this.context.transferFromImageBitmap(image)
}) })
...@@ -2691,7 +2712,7 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, ...@@ -2691,7 +2712,7 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number,
grad.addColorStop(0.5, '#ffffff') grad.addColorStop(0.5, '#ffffff')
grad.addColorStop(1.0, '#00ff00') grad.addColorStop(1.0, '#00ff00')
this.offContext.fillStyle = grad this.offContext.fillStyle = grad
this.offContext.fillRect(0, 0, 500, 500) this.offContext.fillRect(0, 0, 440, 440)
var image = this.offContext.transferToImageBitmap() var image = this.offContext.transferToImageBitmap()
this.context.transferFromImageBitmap(image) this.context.transferFromImageBitmap(image)
}) })
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册