Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
588a87ab
D
Docs
项目概览
OpenHarmony
/
Docs
1 年多 前同步成功
通知
159
Star
292
Fork
28
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
D
Docs
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
提交
588a87ab
编写于
2月 16, 2022
作者:
E
ester.zhou
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update docs
Signed-off-by:
N
ester.zhou
<
ester.zhou@huawei.com
>
上级
525141cf
变更
6
隐藏空白更改
内联
并排
Showing
6 changed file
with
150 addition
and
166 deletion
+150
-166
en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
...ion-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
+68
-80
en/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md
...ion-dev/reference/arkui-ts/ts-components-canvas-canvas.md
+1
-1
en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md
...reference/arkui-ts/ts-components-canvas-canvasgradient.md
+4
-5
en/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md
...ev/reference/arkui-ts/ts-components-canvas-imagebitmap.md
+1
-1
en/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md
...ion-dev/reference/arkui-ts/ts-components-canvas-path2d.md
+12
-13
en/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md
...eference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md
+64
-66
未找到文件。
en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
浏览文件 @
588a87ab
...
...
@@ -7,7 +7,7 @@ Use **RenderingContext** to draw rectangles, text, images, and other objects o
## APIs<a name="section15647101282420"></a>
CanvasRenderingContext2D
\(
setting: RenderingContextSetting
\)
CanvasRenderingContext2D
\(
setting: RenderingContextSetting
s
\)
-
Parameters
...
...
@@ -41,9 +41,9 @@ CanvasRenderingContext2D\(setting: RenderingContextSetting\)
### RenderingContextSettings<a name="section189411348141711"></a>
RenderingContextSettings
\(
antialias?: bool
, alpha?: bool
\)
RenderingContextSettings
\(
antialias?: bool
\)
Configures the settings of a
**CanvasRenderingContext2D**
object, including whether to enable antialiasing
and whether to contain an alpha channel
.
Configures the settings of a
**CanvasRenderingContext2D**
object, including whether to enable antialiasing.
-
Parameters
...
...
@@ -71,17 +71,6 @@ Configures the settings of a **CanvasRenderingContext2D** object, including wh
<td class="cellrowborder" valign="top" width="36.22%" headers="mcps1.1.6.1.5 "><p id="p120104120547"><a name="p120104120547"></a><a name="p120104120547"></a>Whether antialiasing is enabled.</p>
</td>
</tr>
<tr id="row4105559574"><td class="cellrowborder" valign="top" width="12.540000000000001%" headers="mcps1.1.6.1.1 "><p id="p2105259577"><a name="p2105259577"></a><a name="p2105259577"></a>alpha</p>
</td>
<td class="cellrowborder" valign="top" width="20.150000000000002%" headers="mcps1.1.6.1.2 "><p id="p1010612565713"><a name="p1010612565713"></a><a name="p1010612565713"></a>bool</p>
</td>
<td class="cellrowborder" valign="top" width="12.49%" headers="mcps1.1.6.1.3 "><p id="p17106453572"><a name="p17106453572"></a><a name="p17106453572"></a>No</p>
</td>
<td class="cellrowborder" valign="top" width="18.6%" headers="mcps1.1.6.1.4 "><p id="p101061659572"><a name="p101061659572"></a><a name="p101061659572"></a>false</p>
</td>
<td class="cellrowborder" valign="top" width="36.22%" headers="mcps1.1.6.1.5 "><p id="p20106153575"><a name="p20106153575"></a><a name="p20106153575"></a>Whether the canvas contains an alpha channel.</p>
</td>
</tr>
</tbody>
</table>
...
...
@@ -285,7 +274,7 @@ Configures the settings of a **CanvasRenderingContext2D** object, including wh
@Entry
@Component
struct FillStyleExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
...
...
@@ -313,7 +302,7 @@ struct FillStyleExample {
@Entry
@Component
struct LineWidthExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
...
...
@@ -341,7 +330,7 @@ struct LineWidthExample {
@Entry
@Component
struct StrokeStyleExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
...
...
@@ -370,7 +359,7 @@ struct StrokeStyleExample {
@Entry
@Component
struct LineCapExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
...
...
@@ -402,7 +391,7 @@ struct LineCapExample {
@Entry
@Component
struct LineJoinExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
...
...
@@ -435,7 +424,7 @@ struct LineJoinExample {
@Entry
@Component
struct MiterLimit {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
...
...
@@ -468,7 +457,7 @@ struct MiterLimit {
@Entry
@Component
struct Font {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
...
...
@@ -495,8 +484,8 @@ struct Font {
```
@Entry
@Component
struct
TextAlign
{
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
struct
CanvasExample
{
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
...
...
@@ -539,7 +528,7 @@ struct TextAlign {
@Entry
@Component
struct TextBaseline {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
...
...
@@ -582,7 +571,7 @@ struct TextBaseline {
@Entry
@Component
struct GlobalAlpha {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
...
...
@@ -613,7 +602,7 @@ struct GlobalAlpha {
@Entry
@Component
struct LineDashOffset {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
...
...
@@ -707,7 +696,7 @@ struct LineDashOffset {
@Entry
@Component
struct GlobalCompositeOperation {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
...
...
@@ -743,7 +732,7 @@ struct GlobalCompositeOperation {
@Entry
@Component
struct ShadowBlur {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
);
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
build() {
...
...
@@ -773,7 +762,7 @@ struct ShadowBlur {
@Entry
@Component
struct ShadowColor {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
...
...
@@ -803,7 +792,7 @@ struct ShadowColor {
@Entry
@Component
struct ShadowOffsetX {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
...
...
@@ -834,7 +823,7 @@ struct ShadowOffsetX {
@Entry
@Component
struct ShadowOffsetY {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...
...
@@ -864,7 +853,7 @@ struct ShadowOffsetY {
@Entry
@Component
struct ImageSmoothingEnabled {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
...
...
@@ -964,7 +953,7 @@ Fills a rectangle on the canvas.
@Entry
@Component
struct FillRect {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
...
...
@@ -1061,7 +1050,7 @@ Draws a rectangle stroke on the canvas.
@Entry
@Component
struct StrokeRect {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...
...
@@ -1157,7 +1146,7 @@ Clears the content in a rectangle on the canvas.
@Entry
@Component
struct ClearRect {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...
...
@@ -1244,7 +1233,7 @@ Draws filled text on the canvas.
@Entry
@Component
struct FillText {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...
...
@@ -1330,7 +1319,7 @@ Draws a text stroke on the canvas.
@Entry
@Component
struct StrokeText {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...
...
@@ -1433,7 +1422,7 @@ Returns a **TextMetrics** object used to obtain the width of specified text.
@Entry
@Component
struct MeasureText {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...
...
@@ -1497,8 +1486,8 @@ Strokes a path.
```
@Entry
@Component
struct
Strok
e {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
struct
CanvasExampl
e {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
...
...
@@ -1535,7 +1524,7 @@ Creates a drawing path.
@Entry
@Component
struct BeginPath {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
...
...
@@ -1615,7 +1604,7 @@ Moves a drawing path to a target position on the canvas.
@Entry
@Component
struct MoveTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
...
...
@@ -1693,7 +1682,7 @@ Connects the current point to a target position using a straight line.
@Entry
@Component
struct LineTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
...
...
@@ -1730,7 +1719,7 @@ Draws a closed path.
@Entry
@Component
struct ClosePath {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
...
...
@@ -1809,7 +1798,7 @@ Creates a pattern for image filling based on a specified source image and repeti
@Entry
@Component
struct CreatePattern {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
...
...
@@ -1931,7 +1920,7 @@ Draws a cubic bezier curve on the canvas.
@Entry
@Component
struct BezierCurveTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
...
...
@@ -2031,7 +2020,7 @@ Draws a quadratic curve on the canvas.
@Entry
@Component
struct QuadraticCurveTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
);
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...
...
@@ -2152,7 +2141,7 @@ Draws an arc on the canvas.
@Entry
@Component
struct Arc {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
...
...
@@ -2262,7 +2251,7 @@ Draws an arc based on the radius and points on the arc.
@Entry
@Component
struct ArcTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
...
...
@@ -2405,7 +2394,7 @@ Draws an ellipse in the specified rectangular region.
@Entry
@Component
struct Ellipse {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
...
...
@@ -2507,8 +2496,8 @@ Creates a rectangle.
```
@Entry
@Component
struct
Rect
{
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
struct
CanvasExample
{
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
...
...
@@ -2543,7 +2532,7 @@ Fills the area inside a closed path.
@Entry
@Component
struct Fill {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
...
...
@@ -2578,7 +2567,7 @@ Sets the current path to a clipping path.
@Entry
@Component
struct Clip {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
...
...
@@ -2650,7 +2639,7 @@ Rotates a canvas clockwise around its coordinate axes.
@Entry
@Component
struct Rotate {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
...
...
@@ -2726,7 +2715,7 @@ Scales a canvas based on scaling factors.
@Entry
@Component
struct Scale {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
...
...
@@ -2851,7 +2840,7 @@ Defines a transformation matrix. To transform a graph, you only need to set para
@Entry
@Component
struct Transform {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...
...
@@ -2975,7 +2964,7 @@ Resets the existing transformation matrix and creates a new transformation matri
@Entry
@Component
struct SetTransform {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
...
...
@@ -3053,7 +3042,7 @@ Moves the origin of the coordinate system.
@Entry
@Component
struct Translate {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
...
...
@@ -3211,7 +3200,7 @@ Draws an image.
@Entry
@Component
struct ImageExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
);
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private img:ImageBitmap = new ImageBitmap("common/images/example.jpg");
build() {
...
...
@@ -3492,7 +3481,7 @@ Puts the [ImageData](ts-components-canvas-imagedata.md) onto a rectangular are
@Entry
@Component
struct PutImageData {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
...
...
@@ -3532,8 +3521,8 @@ Restores the saved drawing context.
```
@Entry
@Component
struct
Restor
e {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
struct
CanvasExampl
e {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
...
...
@@ -3543,7 +3532,7 @@ Restores the saved drawing context.
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
this.cont
roller
.restore()
this.cont
ext
.restore()
})
}
.width('100%')
...
...
@@ -3564,8 +3553,8 @@ Saves the current drawing context.
```
@Entry
@Component
struct
Restor
e {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
struct
CanvasExampl
e {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
...
...
@@ -3659,9 +3648,8 @@ Creates a linear gradient.
@Entry
@Component
struct CreateLinearGradient {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private gra:CanvasGradient = new CanvasGradient()
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...
...
@@ -3671,9 +3659,9 @@ Creates a linear gradient.
.backgroundColor('#ffff00')
.onReady(() =>{
var grad = this.context.createLinearGradient(50,0, 300,100)
this.
gra.addColorStop(0.0, 'red')
this.
gra.addColorStop(0.5, 'white')
this.
gra.addColorStop(1.0, 'green')
gra.addColorStop(0.0, 'red')
gra.addColorStop(0.5, 'white')
gra.addColorStop(1.0, 'green')
this.context.fillStyle = grad
this.context.fillRect(0, 0, 500, 500)
})
...
...
@@ -3683,8 +3671,9 @@ Creates a linear gradient.
}
}
```
![](figures/en-us_image_0000001237555149.png)
![](
figures/en-us_image_0000001237555149.png
)
### createRadialGradient<a name="section932032913385"></a>
...
...
@@ -3783,10 +3772,9 @@ Creates a linear gradient.
@Entry
@Component
struct CreateRadialGradient {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private gra:CanvasGradient = new CanvasGradient()
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
...
...
@@ -3795,9 +3783,9 @@ Creates a linear gradient.
.backgroundColor('#ffff00')
.onReady(() =>{
var grad = this.context.createRadialGradient(200,200,50, 200,200,200)
this.
gra.addColorStop(0.0, 'red')
this.
gra.addColorStop(0.5, 'white')
this.
gra.addColorStop(1.0, 'green')
gra.addColorStop(0.0, 'red')
gra.addColorStop(0.5, 'white')
gra.addColorStop(1.0, 'green')
this.context.fillStyle = grad
this.context.fillRect(0, 0, 500, 500)
})
...
...
@@ -3807,8 +3795,8 @@ Creates a linear gradient.
}
}
```
![](figures/en-us_image_0000001192755188.png)
![](
figures/en-us_image_0000001192755188.png
)
## CanvasPattern<a name="section146853345417"></a>
...
...
en/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md
浏览文件 @
588a87ab
...
...
@@ -80,7 +80,7 @@ In addition to [universal events](ts-universal-events-click.md), the following
@Entry
@Component
struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
...
...
en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md
浏览文件 @
588a87ab
...
...
@@ -57,7 +57,7 @@ Adds a color stop for the **CanvasGradient** object based on the specified off
@Entry
@Component
struct Page45 {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private gra:CanvasGradient = new CanvasGradient()
...
...
@@ -69,9 +69,9 @@ Adds a color stop for the **CanvasGradient** object based on the specified off
.backgroundColor('#ffff00')
.onReady(() =>{
var grad = this.context.createLinearGradient(50,0, 300,100)
this.
gra.addColorStop(0.0, 'red')
this.
gra.addColorStop(0.5, 'white')
this.
gra.addColorStop(1.0, 'green')
gra.addColorStop(0.0, 'red')
gra.addColorStop(0.5, 'white')
gra.addColorStop(1.0, 'green')
this.context.fillStyle = grad
this.context.fillRect(0, 0, 500, 500)
})
...
...
@@ -84,4 +84,3 @@ Adds a color stop for the **CanvasGradient** object based on the specified off
![](figures/en-us_image_0000001192915130.png)
en/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md
浏览文件 @
588a87ab
...
...
@@ -85,7 +85,7 @@ Example
@Entry
@Component
struct DrawImageExample {
private settings:RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings:RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private img:ImageBitmap = new ImageBitmap("common/images/example.jpg")
...
...
en/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md
浏览文件 @
588a87ab
...
...
@@ -46,7 +46,7 @@ Adds a path to this path.
@Entry
@Component
struct AddPath {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private path2Da: Path2D = new Path2D("M250 150 L150 350 L350 350 Z")
...
...
@@ -84,7 +84,7 @@ Moves the current point of the path back to the start point of the path, and dra
@Entry
@Component
struct ClosePath {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private path2Db: Path2D = new Path2D()
...
...
@@ -163,7 +163,7 @@ Moves the current coordinate point of the path to the target point, without draw
@Entry
@Component
struct MoveTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private path2Db: Path2D = new Path2D()
...
...
@@ -242,7 +242,7 @@ Draws a straight line from the current point to the target point.
@Entry
@Component
struct LineTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private path2Db: Path2D = new Path2D()
...
...
@@ -367,7 +367,7 @@ Draws a cubic bezier curve on the canvas.
@Entry
@Component
struct BezierCurveTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private path2Db: Path2D = new Path2D()
...
...
@@ -465,7 +465,7 @@ Draws a quadratic curve on the canvas.
@Entry
@Component
struct QuadraticCurveTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private path2Db: Path2D = new Path2D()
...
...
@@ -586,7 +586,7 @@ Draws an arc on the canvas.
@Entry
@Component
struct Arc {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private path2Db: Path2D = new Path2D()
...
...
@@ -694,7 +694,7 @@ Draws an arc based on the radius and points on the arc.
@Entry
@Component
struct ArcTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private path2Db: Path2D = new Path2D()
...
...
@@ -835,8 +835,8 @@ Draws an ellipse in the specified rectangular region.
```
@Entry
@Component
struct
Ellips
e {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
struct
CanvasExampl
e {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private path2Db: Path2D = new Path2D()
...
...
@@ -933,8 +933,8 @@ Creates a rectangle.
```
@Entry
@Component
struct
Rect
{
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
struct
CanvasExample
{
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private path2Db: Path2D = new Path2D()
...
...
@@ -956,4 +956,3 @@ Creates a rectangle.
![](figures/en-us_image_0000001192755174.png)
en/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md
浏览文件 @
588a87ab
...
...
@@ -260,7 +260,7 @@ OffscreenCanvasRenderingContext2D\(width: number, height: number, setting: Rende
@Entry
@Component
struct FillStyleExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
...
...
@@ -291,7 +291,7 @@ struct FillStyleExample {
@Entry
@Component
struct LineWidthExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
...
...
@@ -322,7 +322,7 @@ struct LineWidthExample {
@Entry
@Component
struct StrokeStyleExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
...
...
@@ -354,7 +354,7 @@ struct StrokeStyleExample {
@Entry
@Component
struct LineCapExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
...
...
@@ -389,7 +389,7 @@ struct LineCapExample {
@Entry
@Component
struct LineJoinExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
...
...
@@ -425,7 +425,7 @@ struct LineJoinExample {
@Entry
@Component
struct MiterLimit {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
...
...
@@ -461,7 +461,7 @@ struct MiterLimit {
@Entry
@Component
struct Font {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
...
...
@@ -491,8 +491,8 @@ struct Font {
```
@Entry
@Component
struct
TextAlign
{
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
struct
CanvasExample
{
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
...
...
@@ -538,7 +538,7 @@ struct TextAlign {
@Entry
@Component
struct TextBaseline {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
...
...
@@ -584,7 +584,7 @@ struct TextBaseline {
@Entry
@Component
struct GlobalAlpha {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
...
...
@@ -618,7 +618,7 @@ struct GlobalAlpha {
@Entry
@Component
struct LineDashOffset {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
...
...
@@ -715,7 +715,7 @@ struct LineDashOffset {
@Entry
@Component
struct GlobalCompositeOperation {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
...
...
@@ -754,7 +754,7 @@ struct GlobalCompositeOperation {
@Entry
@Component
struct ShadowBlur {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
...
...
@@ -787,7 +787,7 @@ struct ShadowBlur {
@Entry
@Component
struct ShadowColor {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
...
...
@@ -821,7 +821,7 @@ struct ShadowColor {
@Entry
@Component
struct ShadowOffsetX {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
...
...
@@ -855,7 +855,7 @@ struct ShadowOffsetX {
@Entry
@Component
struct ShadowOffsetY {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
...
...
@@ -889,7 +889,7 @@ struct ShadowOffsetY {
@Entry
@Component
struct ImageSmoothingEnabled {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
...
...
@@ -991,7 +991,7 @@ Fills a rectangle on the canvas.
@Entry
@Component
struct FillRect {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
...
...
@@ -1091,7 +1091,7 @@ Draws a rectangle stroke on the canvas.
@Entry
@Component
struct StrokeRect {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
build() {
...
...
@@ -1190,7 +1190,7 @@ Clears the content in a rectangle on the canvas.
@Entry
@Component
struct ClearRect {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
build() {
...
...
@@ -1280,7 +1280,7 @@ Draws filled text on the canvas.
@Entry
@Component
struct FillText {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
build() {
...
...
@@ -1369,7 +1369,7 @@ Draws a text stroke on the canvas.
@Entry
@Component
struct StrokeText {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
build() {
...
...
@@ -1474,7 +1474,7 @@ Returns a **TextMetrics** object used to obtain the width of specified text.
@Entry
@Component
struct MeasureText {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
build() {
...
...
@@ -1541,10 +1541,10 @@ Strokes a path.
```
@Entry
@Component
struct
Strok
e {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
struct
CanvasExampl
e {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new Offscreen
RenderingContext
(600, 600, this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new Offscreen
CanvasRenderingContext2D
(600, 600, this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
...
...
@@ -1581,7 +1581,7 @@ Creates a drawing path.
@Entry
@Component
struct BeginPath {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
build() {
...
...
@@ -1663,7 +1663,7 @@ Moves a drawing path to a target position on the canvas.
@Entry
@Component
struct MoveTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
build() {
...
...
@@ -1743,7 +1743,7 @@ Connects the current point to a target position using a straight line.
@Entry
@Component
struct LineTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
build() {
...
...
@@ -1782,7 +1782,7 @@ Draws a closed path.
@Entry
@Component
struct ClosePath {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
build() {
...
...
@@ -1863,7 +1863,7 @@ Creates a pattern for image filling based on a specified source image and repeti
@Entry
@Component
struct CreatePattern {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
...
...
@@ -1987,7 +1987,7 @@ Draws a cubic bezier curve on the canvas.
@Entry
@Component
struct BezierCurveTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
build() {
...
...
@@ -2089,7 +2089,7 @@ Draws a quadratic curve on the canvas.
@Entry
@Component
struct QuadraticCurveTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
build() {
...
...
@@ -2212,7 +2212,7 @@ Draws an arc on the canvas.
@Entry
@Component
struct Arc {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
build() {
...
...
@@ -2324,7 +2324,7 @@ Draws an arc based on the radius and points on the arc.
@Entry
@Component
struct ArcTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
build() {
...
...
@@ -2468,8 +2468,8 @@ Draws an ellipse in the specified rectangular region.
```
@Entry
@Component
struct
Ellips
e {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
struct
CanvasExampl
e {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
build() {
...
...
@@ -2569,8 +2569,8 @@ Creates a rectangle.
```
@Entry
@Component
struct
Rect
{
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
struct
CanvasExample
{
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
build() {
...
...
@@ -2607,7 +2607,7 @@ Fills the area inside a closed path.
@Entry
@Component
struct Fill {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
build() {
...
...
@@ -2644,7 +2644,7 @@ Sets the current path to a clipping path.
@Entry
@Component
struct Clip {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
build() {
...
...
@@ -2714,7 +2714,7 @@ Rotates a canvas clockwise around its coordinate axes.
@Entry
@Component
struct Rotate {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
build() {
...
...
@@ -2792,7 +2792,7 @@ Scales a canvas based on scaling factors.
@Entry
@Component
struct Scale {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
build() {
...
...
@@ -2919,7 +2919,7 @@ Defines a transformation matrix. To transform a graph, you only need to set para
@Entry
@Component
struct Transform {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
build() {
...
...
@@ -3046,7 +3046,7 @@ Resets the existing transformation matrix and creates a new transformation matri
@Entry
@Component
struct SetTransform {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
build() {
...
...
@@ -3126,7 +3126,7 @@ Moves the origin of the coordinate system.
@Entry
@Component
struct Translate {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
build() {
...
...
@@ -3286,7 +3286,7 @@ Draws an image.
@Entry
@Component
struct Index {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
...
...
@@ -3570,7 +3570,7 @@ Puts the [ImageData](ts-components-canvas-imagedata.md) onto a rectangular are
@Entry
@Component
struct PutImageData {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
build() {
...
...
@@ -3612,8 +3612,8 @@ Restores the saved drawing context.
```
@Entry
@Component
struct
Restor
e {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
struct
CanvasExampl
e {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
build() {
...
...
@@ -3647,7 +3647,7 @@ Saves the current drawing context.
@Entry
@Component
struct Restore {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
build() {
...
...
@@ -3743,9 +3743,8 @@ Creates a linear gradient.
@Entry
@Component
struct CreateLinearGradient {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private gra:CanvasGradient = new CanvasGradient()
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...
...
@@ -3755,9 +3754,9 @@ Creates a linear gradient.
.backgroundColor('#ffff00')
.onReady(() =>{
var grad = this.offContext.createLinearGradient(50,0, 300,100)
this.
gra.addColorStop(0.0, 'red')
this.
gra.addColorStop(0.5, 'white')
this.
gra.addColorStop(1.0, 'green')
gra.addColorStop(0.0, 'red')
gra.addColorStop(0.5, 'white')
gra.addColorStop(1.0, 'green')
this.offContext.fillStyle = grad
this.offContext.fillRect(0, 0, 500, 500)
var image = this.offContext.transferToImageBitmap()
...
...
@@ -3769,8 +3768,8 @@ Creates a linear gradient.
}
}
```
![](figures/en-us_image_0000001192915162.png)
![](
figures/en-us_image_0000001192915162.png
)
### createRadialGradient<a name="section136731637204919"></a>
...
...
@@ -3869,9 +3868,8 @@ Creates a linear gradient.
@Entry
@Component
struct CreateRadialGradient {
private settings: RenderingContextSettings = new RenderingContextSettings(true
,true
)
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private gra:CanvasGradient = new CanvasGradient()
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...
...
@@ -3881,9 +3879,9 @@ Creates a linear gradient.
.backgroundColor('#ffff00')
.onReady(() =>{
var grad = this.offContext.createRadialGradient(200,200,50, 200,200,200)
this.
gra.addColorStop(0.0, 'red')
this.
gra.addColorStop(0.5, 'white')
this.
gra.addColorStop(1.0, 'green')
gra.addColorStop(0.0, 'red')
gra.addColorStop(0.5, 'white')
gra.addColorStop(1.0, 'green')
this.offContext.fillStyle = grad
this.offContext.fillRect(0, 0, 500, 500)
var image = this.offContext.transferToImageBitmap()
...
...
@@ -3895,8 +3893,8 @@ Creates a linear gradient.
}
}
```
![](figures/en-us_image_0000001237555179.png)
![](
figures/en-us_image_0000001237555179.png
)
## CanvasPattern<a name="section146853345417"></a>
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录