Skip to content

D
Docs

OpenHarmony / Docs
大约 2 年 前同步成功

通知 161
Star 293
Fork 28
D
Docs
提交 588a87ab 编写于 作者: E ester.zhou
浏览文件
操作

update docs 

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>
上级 525141cf
隐藏空白更改
内联 并排
Showing with 150 addition and 166 deletion
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 ...@@ -7,7 +7,7 @@ Use **RenderingContext** to draw rectangles, text, images, and other objects o
## APIs<a name="section15647101282420"></a> ## APIs<a name="section15647101282420"></a>
CanvasRenderingContext2D\(setting: RenderingContextSetting\) CanvasRenderingContext2D\(setting: RenderingContextSettings\)
- Parameters - Parameters
...@@ -41,9 +41,9 @@ CanvasRenderingContext2D\(setting: RenderingContextSetting\) ...@@ -41,9 +41,9 @@ CanvasRenderingContext2D\(setting: RenderingContextSetting\)
### RenderingContextSettings<a name="section189411348141711"></a> ### 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 - Parameters
...@@ -71,17 +71,6 @@ Configures the settings of a **CanvasRenderingContext2D** object, including wh ...@@ -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 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> </td>
</tr> </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> </tbody>
</table> </table>
...@@ -285,7 +274,7 @@ Configures the settings of a **CanvasRenderingContext2D** object, including wh ...@@ -285,7 +274,7 @@ Configures the settings of a **CanvasRenderingContext2D** object, including wh
@Entry @Entry
@Component @Component
struct FillStyleExample { struct FillStyleExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true,true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
...@@ -313,7 +302,7 @@ struct FillStyleExample { ...@@ -313,7 +302,7 @@ struct FillStyleExample {
@Entry @Entry
@Component @Component
struct LineWidthExample { struct LineWidthExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true,true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
...@@ -341,7 +330,7 @@ struct LineWidthExample { ...@@ -341,7 +330,7 @@ struct LineWidthExample {
@Entry @Entry
@Component @Component
struct StrokeStyleExample { struct StrokeStyleExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true,true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
...@@ -370,7 +359,7 @@ struct StrokeStyleExample { ...@@ -370,7 +359,7 @@ struct StrokeStyleExample {
@Entry @Entry
@Component @Component
struct LineCapExample { struct LineCapExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true,true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
...@@ -402,7 +391,7 @@ struct LineCapExample { ...@@ -402,7 +391,7 @@ struct LineCapExample {
@Entry @Entry
@Component @Component
struct LineJoinExample { struct LineJoinExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true,true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
...@@ -435,7 +424,7 @@ struct LineJoinExample { ...@@ -435,7 +424,7 @@ struct LineJoinExample {
@Entry @Entry
@Component @Component
struct MiterLimit { struct MiterLimit {
private settings: RenderingContextSettings = new RenderingContextSettings(true,true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
...@@ -468,7 +457,7 @@ struct MiterLimit { ...@@ -468,7 +457,7 @@ struct MiterLimit {
@Entry @Entry
@Component @Component
struct Font { struct Font {
private settings: RenderingContextSettings = new RenderingContextSettings(true,true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
...@@ -495,8 +484,8 @@ struct Font { ...@@ -495,8 +484,8 @@ struct Font {
``` ```
@Entry @Entry
@Component @Component
struct TextAlign { struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true,true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
...@@ -539,7 +528,7 @@ struct TextAlign { ...@@ -539,7 +528,7 @@ struct TextAlign {
@Entry @Entry
@Component @Component
struct TextBaseline { struct TextBaseline {
private settings: RenderingContextSettings = new RenderingContextSettings(true,true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
...@@ -582,7 +571,7 @@ struct TextBaseline { ...@@ -582,7 +571,7 @@ struct TextBaseline {
@Entry @Entry
@Component @Component
struct GlobalAlpha { struct GlobalAlpha {
private settings: RenderingContextSettings = new RenderingContextSettings(true,true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
...@@ -613,7 +602,7 @@ struct GlobalAlpha { ...@@ -613,7 +602,7 @@ struct GlobalAlpha {
@Entry @Entry
@Component @Component
struct LineDashOffset { struct LineDashOffset {
private settings: RenderingContextSettings = new RenderingContextSettings(true,true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
...@@ -707,7 +696,7 @@ struct LineDashOffset { ...@@ -707,7 +696,7 @@ struct LineDashOffset {
@Entry @Entry
@Component @Component
struct GlobalCompositeOperation { struct GlobalCompositeOperation {
private settings: RenderingContextSettings = new RenderingContextSettings(true,true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
...@@ -743,7 +732,7 @@ struct GlobalCompositeOperation { ...@@ -743,7 +732,7 @@ struct GlobalCompositeOperation {
@Entry @Entry
@Component @Component
struct ShadowBlur { struct ShadowBlur {
private settings: RenderingContextSettings = new RenderingContextSettings(true,true); private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
build() { build() {
...@@ -773,7 +762,7 @@ struct ShadowBlur { ...@@ -773,7 +762,7 @@ struct ShadowBlur {
@Entry @Entry
@Component @Component
struct ShadowColor { struct ShadowColor {
private settings: RenderingContextSettings = new RenderingContextSettings(true,true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
...@@ -803,7 +792,7 @@ struct ShadowColor { ...@@ -803,7 +792,7 @@ struct ShadowColor {
@Entry @Entry
@Component @Component
struct ShadowOffsetX { struct ShadowOffsetX {
private settings: RenderingContextSettings = new RenderingContextSettings(true,true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
...@@ -834,7 +823,7 @@ struct ShadowOffsetX { ...@@ -834,7 +823,7 @@ struct ShadowOffsetX {
@Entry @Entry
@Component @Component
struct ShadowOffsetY { struct ShadowOffsetY {
private settings: RenderingContextSettings = new RenderingContextSettings(true,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 }) {
...@@ -864,7 +853,7 @@ struct ShadowOffsetY { ...@@ -864,7 +853,7 @@ struct ShadowOffsetY {
@Entry @Entry
@Component @Component
struct ImageSmoothingEnabled { struct ImageSmoothingEnabled {
private settings: RenderingContextSettings = new RenderingContextSettings(true,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/icon.jpg") private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
...@@ -964,7 +953,7 @@ Fills a rectangle on the canvas. ...@@ -964,7 +953,7 @@ Fills a rectangle on the canvas.
@Entry @Entry
@Component @Component
struct FillRect { struct FillRect {
private settings: RenderingContextSettings = new RenderingContextSettings(true,true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
...@@ -1061,7 +1050,7 @@ Draws a rectangle stroke on the canvas. ...@@ -1061,7 +1050,7 @@ Draws a rectangle stroke on the canvas.
@Entry @Entry
@Component @Component
struct StrokeRect { struct StrokeRect {
private settings: RenderingContextSettings = new RenderingContextSettings(true,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 }) {
...@@ -1157,7 +1146,7 @@ Clears the content in a rectangle on the canvas. ...@@ -1157,7 +1146,7 @@ Clears the content in a rectangle on the canvas.
@Entry @Entry
@Component @Component
struct ClearRect { struct ClearRect {
private settings: RenderingContextSettings = new RenderingContextSettings(true,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 }) {
...@@ -1244,7 +1233,7 @@ Draws filled text on the canvas. ...@@ -1244,7 +1233,7 @@ Draws filled text on the canvas.
@Entry @Entry
@Component @Component
struct FillText { struct FillText {
private settings: RenderingContextSettings = new RenderingContextSettings(true,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 }) {
...@@ -1330,7 +1319,7 @@ Draws a text stroke on the canvas. ...@@ -1330,7 +1319,7 @@ Draws a text stroke on the canvas.
@Entry @Entry
@Component @Component
struct StrokeText { struct StrokeText {
private settings: RenderingContextSettings = new RenderingContextSettings(true,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 }) {
...@@ -1433,7 +1422,7 @@ Returns a **TextMetrics** object used to obtain the width of specified text. ...@@ -1433,7 +1422,7 @@ Returns a **TextMetrics** object used to obtain the width of specified text.
@Entry @Entry
@Component @Component
struct MeasureText { struct MeasureText {
private settings: RenderingContextSettings = new RenderingContextSettings(true,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 }) {
...@@ -1497,8 +1486,8 @@ Strokes a path. ...@@ -1497,8 +1486,8 @@ Strokes a path.
``` ```
@Entry @Entry
@Component @Component
struct Stroke { struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true,true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
...@@ -1535,7 +1524,7 @@ Creates a drawing path. ...@@ -1535,7 +1524,7 @@ Creates a drawing path.
@Entry @Entry
@Component @Component
struct BeginPath { struct BeginPath {
private settings: RenderingContextSettings = new RenderingContextSettings(true,true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
...@@ -1615,7 +1604,7 @@ Moves a drawing path to a target position on the canvas. ...@@ -1615,7 +1604,7 @@ Moves a drawing path to a target position on the canvas.
@Entry @Entry
@Component @Component
struct MoveTo { struct MoveTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true,true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
...@@ -1693,7 +1682,7 @@ Connects the current point to a target position using a straight line. ...@@ -1693,7 +1682,7 @@ Connects the current point to a target position using a straight line.
@Entry @Entry
@Component @Component
struct LineTo { struct LineTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true,true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
...@@ -1730,7 +1719,7 @@ Draws a closed path. ...@@ -1730,7 +1719,7 @@ Draws a closed path.
@Entry @Entry
@Component @Component
struct ClosePath { struct ClosePath {
private settings: RenderingContextSettings = new RenderingContextSettings(true,true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
...@@ -1809,7 +1798,7 @@ Creates a pattern for image filling based on a specified source image and repeti ...@@ -1809,7 +1798,7 @@ Creates a pattern for image filling based on a specified source image and repeti
@Entry @Entry
@Component @Component
struct CreatePattern { struct CreatePattern {
private settings: RenderingContextSettings = new RenderingContextSettings(true,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/icon.jpg") private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
...@@ -1931,7 +1920,7 @@ Draws a cubic bezier curve on the canvas. ...@@ -1931,7 +1920,7 @@ Draws a cubic bezier curve on the canvas.
@Entry @Entry
@Component @Component
struct BezierCurveTo { struct BezierCurveTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true,true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
...@@ -2031,7 +2020,7 @@ Draws a quadratic curve on the canvas. ...@@ -2031,7 +2020,7 @@ Draws a quadratic curve on the canvas.
@Entry @Entry
@Component @Component
struct QuadraticCurveTo { struct QuadraticCurveTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true,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 }) {
...@@ -2152,7 +2141,7 @@ Draws an arc on the canvas. ...@@ -2152,7 +2141,7 @@ Draws an arc on the canvas.
@Entry @Entry
@Component @Component
struct Arc { struct Arc {
private settings: RenderingContextSettings = new RenderingContextSettings(true,true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
...@@ -2262,7 +2251,7 @@ Draws an arc based on the radius and points on the arc. ...@@ -2262,7 +2251,7 @@ Draws an arc based on the radius and points on the arc.
@Entry @Entry
@Component @Component
struct ArcTo { struct ArcTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true,true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
...@@ -2405,7 +2394,7 @@ Draws an ellipse in the specified rectangular region. ...@@ -2405,7 +2394,7 @@ Draws an ellipse in the specified rectangular region.
@Entry @Entry
@Component @Component
struct Ellipse { struct Ellipse {
private settings: RenderingContextSettings = new RenderingContextSettings(true,true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
...@@ -2507,8 +2496,8 @@ Creates a rectangle. ...@@ -2507,8 +2496,8 @@ Creates a rectangle.
``` ```
@Entry @Entry
@Component @Component
struct Rect { struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true,true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
...@@ -2543,7 +2532,7 @@ Fills the area inside a closed path. ...@@ -2543,7 +2532,7 @@ Fills the area inside a closed path.
@Entry @Entry
@Component @Component
struct Fill { struct Fill {
private settings: RenderingContextSettings = new RenderingContextSettings(true,true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
...@@ -2578,7 +2567,7 @@ Sets the current path to a clipping path. ...@@ -2578,7 +2567,7 @@ Sets the current path to a clipping path.
@Entry @Entry
@Component @Component
struct Clip { struct Clip {
private settings: RenderingContextSettings = new RenderingContextSettings(true,true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
...@@ -2650,7 +2639,7 @@ Rotates a canvas clockwise around its coordinate axes. ...@@ -2650,7 +2639,7 @@ Rotates a canvas clockwise around its coordinate axes.
@Entry @Entry
@Component @Component
struct Rotate { struct Rotate {
private settings: RenderingContextSettings = new RenderingContextSettings(true,true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
...@@ -2726,7 +2715,7 @@ Scales a canvas based on scaling factors. ...@@ -2726,7 +2715,7 @@ Scales a canvas based on scaling factors.
@Entry @Entry
@Component @Component
struct Scale { struct Scale {
private settings: RenderingContextSettings = new RenderingContextSettings(true,true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
...@@ -2851,7 +2840,7 @@ Defines a transformation matrix. To transform a graph, you only need to set para ...@@ -2851,7 +2840,7 @@ Defines a transformation matrix. To transform a graph, you only need to set para
@Entry @Entry
@Component @Component
struct Transform { struct Transform {
private settings: RenderingContextSettings = new RenderingContextSettings(true,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 }) {
...@@ -2975,7 +2964,7 @@ Resets the existing transformation matrix and creates a new transformation matri ...@@ -2975,7 +2964,7 @@ Resets the existing transformation matrix and creates a new transformation matri
@Entry @Entry
@Component @Component
struct SetTransform { struct SetTransform {
private settings: RenderingContextSettings = new RenderingContextSettings(true,true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
...@@ -3053,7 +3042,7 @@ Moves the origin of the coordinate system. ...@@ -3053,7 +3042,7 @@ Moves the origin of the coordinate system.
@Entry @Entry
@Component @Component
struct Translate { struct Translate {
private settings: RenderingContextSettings = new RenderingContextSettings(true,true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
...@@ -3211,7 +3200,7 @@ Draws an image. ...@@ -3211,7 +3200,7 @@ Draws an image.
@Entry @Entry
@Component @Component
struct ImageExample { struct ImageExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true,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/example.jpg"); private img:ImageBitmap = new ImageBitmap("common/images/example.jpg");
build() { build() {
...@@ -3492,7 +3481,7 @@ Puts the [ImageData](ts-components-canvas-imagedata.md) onto a rectangular are ...@@ -3492,7 +3481,7 @@ Puts the [ImageData](ts-components-canvas-imagedata.md) onto a rectangular are
@Entry @Entry
@Component @Component
struct PutImageData { struct PutImageData {
private settings: RenderingContextSettings = new RenderingContextSettings(true,true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
...@@ -3532,8 +3521,8 @@ Restores the saved drawing context. ...@@ -3532,8 +3521,8 @@ Restores the saved drawing context.
``` ```
@Entry @Entry
@Component @Component
struct Restore { struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true,true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
...@@ -3543,7 +3532,7 @@ Restores the saved drawing context. ...@@ -3543,7 +3532,7 @@ Restores the saved drawing context.
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
this.controller.restore() this.context.restore()
}) })
} }
.width('100%') .width('100%')
...@@ -3564,8 +3553,8 @@ Saves the current drawing context. ...@@ -3564,8 +3553,8 @@ Saves the current drawing context.
``` ```
@Entry @Entry
@Component @Component
struct Restore { struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true,true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
...@@ -3659,9 +3648,8 @@ Creates a linear gradient. ...@@ -3659,9 +3648,8 @@ Creates a linear gradient.
@Entry @Entry
@Component @Component
struct CreateLinearGradient { struct CreateLinearGradient {
private settings: RenderingContextSettings = new RenderingContextSettings(true,true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private gra:CanvasGradient = new CanvasGradient()
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -3671,9 +3659,9 @@ Creates a linear gradient. ...@@ -3671,9 +3659,9 @@ Creates a linear gradient.
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
var grad = this.context.createLinearGradient(50,0, 300,100) var grad = this.context.createLinearGradient(50,0, 300,100)
this.gra.addColorStop(0.0, 'red') gra.addColorStop(0.0, 'red')
this.gra.addColorStop(0.5, 'white') gra.addColorStop(0.5, 'white')
this.gra.addColorStop(1.0, 'green') gra.addColorStop(1.0, 'green')
this.context.fillStyle = grad this.context.fillStyle = grad
this.context.fillRect(0, 0, 500, 500) this.context.fillRect(0, 0, 500, 500)
}) })
...@@ -3683,8 +3671,9 @@ Creates a linear gradient. ...@@ -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> ### createRadialGradient<a name="section932032913385"></a>
...@@ -3783,10 +3772,9 @@ Creates a linear gradient. ...@@ -3783,10 +3772,9 @@ Creates a linear gradient.
@Entry @Entry
@Component @Component
struct CreateRadialGradient { struct CreateRadialGradient {
private settings: RenderingContextSettings = new RenderingContextSettings(true,true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private gra:CanvasGradient = new CanvasGradient()
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)
...@@ -3795,9 +3783,9 @@ Creates a linear gradient. ...@@ -3795,9 +3783,9 @@ Creates a linear gradient.
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
var grad = this.context.createRadialGradient(200,200,50, 200,200,200) var grad = this.context.createRadialGradient(200,200,50, 200,200,200)
this.gra.addColorStop(0.0, 'red') gra.addColorStop(0.0, 'red')
this.gra.addColorStop(0.5, 'white') gra.addColorStop(0.5, 'white')
this.gra.addColorStop(1.0, 'green') gra.addColorStop(1.0, 'green')
this.context.fillStyle = grad this.context.fillStyle = grad
this.context.fillRect(0, 0, 500, 500) this.context.fillRect(0, 0, 500, 500)
}) })
...@@ -3807,8 +3795,8 @@ Creates a linear gradient. ...@@ -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> ## 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 ...@@ -80,7 +80,7 @@ In addition to [universal events](ts-universal-events-click.md), the following
@Entry @Entry
@Component @Component
struct CanvasExample { struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true,true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { 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 ...@@ -57,7 +57,7 @@ Adds a color stop for the **CanvasGradient** object based on the specified off
@Entry @Entry
@Component @Component
struct Page45 { struct Page45 {
private settings: RenderingContextSettings = new RenderingContextSettings(true,true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private gra:CanvasGradient = new CanvasGradient() private gra:CanvasGradient = new CanvasGradient()
...@@ -69,9 +69,9 @@ Adds a color stop for the **CanvasGradient** object based on the specified off ...@@ -69,9 +69,9 @@ Adds a color stop for the **CanvasGradient** object based on the specified off
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
var grad = this.context.createLinearGradient(50,0, 300,100) var grad = this.context.createLinearGradient(50,0, 300,100)
this.gra.addColorStop(0.0, 'red') gra.addColorStop(0.0, 'red')
this.gra.addColorStop(0.5, 'white') gra.addColorStop(0.5, 'white')
this.gra.addColorStop(1.0, 'green') gra.addColorStop(1.0, 'green')
this.context.fillStyle = grad this.context.fillStyle = grad
this.context.fillRect(0, 0, 500, 500) this.context.fillRect(0, 0, 500, 500)
}) })
...@@ -84,4 +84,3 @@ Adds a color stop for the **CanvasGradient** object based on the specified off ...@@ -84,4 +84,3 @@ Adds a color stop for the **CanvasGradient** object based on the specified off
![](figures/en-us_image_0000001192915130.png) ![](figures/en-us_image_0000001192915130.png)
en/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md
浏览文件 @ 588a87ab
...@@ -85,7 +85,7 @@ Example ...@@ -85,7 +85,7 @@ Example
@Entry @Entry
@Component @Component
struct DrawImageExample { struct DrawImageExample {
private settings:RenderingContextSettings = new RenderingContextSettings(true,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/example.jpg") 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. ...@@ -46,7 +46,7 @@ Adds a path to this path.
@Entry @Entry
@Component @Component
struct AddPath { struct AddPath {
private settings: RenderingContextSettings = new RenderingContextSettings(true,true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private path2Da: Path2D = new Path2D("M250 150 L150 350 L350 350 Z") 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 ...@@ -84,7 +84,7 @@ Moves the current point of the path back to the start point of the path, and dra
@Entry @Entry
@Component @Component
struct ClosePath { struct ClosePath {
private settings: RenderingContextSettings = new RenderingContextSettings(true,true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private path2Db: Path2D = new Path2D() private path2Db: Path2D = new Path2D()
...@@ -163,7 +163,7 @@ Moves the current coordinate point of the path to the target point, without draw ...@@ -163,7 +163,7 @@ Moves the current coordinate point of the path to the target point, without draw
@Entry @Entry
@Component @Component
struct MoveTo { struct MoveTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true,true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private path2Db: Path2D = new Path2D() private path2Db: Path2D = new Path2D()
...@@ -242,7 +242,7 @@ Draws a straight line from the current point to the target point. ...@@ -242,7 +242,7 @@ Draws a straight line from the current point to the target point.
@Entry @Entry
@Component @Component
struct LineTo { struct LineTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true,true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private path2Db: Path2D = new Path2D() private path2Db: Path2D = new Path2D()
...@@ -367,7 +367,7 @@ Draws a cubic bezier curve on the canvas. ...@@ -367,7 +367,7 @@ Draws a cubic bezier curve on the canvas.
@Entry @Entry
@Component @Component
struct BezierCurveTo { struct BezierCurveTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true,true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private path2Db: Path2D = new Path2D() private path2Db: Path2D = new Path2D()
...@@ -465,7 +465,7 @@ Draws a quadratic curve on the canvas. ...@@ -465,7 +465,7 @@ Draws a quadratic curve on the canvas.
@Entry @Entry
@Component @Component
struct QuadraticCurveTo { struct QuadraticCurveTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true,true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private path2Db: Path2D = new Path2D() private path2Db: Path2D = new Path2D()
...@@ -586,7 +586,7 @@ Draws an arc on the canvas. ...@@ -586,7 +586,7 @@ Draws an arc on the canvas.
@Entry @Entry
@Component @Component
struct Arc { struct Arc {
private settings: RenderingContextSettings = new RenderingContextSettings(true,true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private path2Db: Path2D = new Path2D() private path2Db: Path2D = new Path2D()
...@@ -694,7 +694,7 @@ Draws an arc based on the radius and points on the arc. ...@@ -694,7 +694,7 @@ Draws an arc based on the radius and points on the arc.
@Entry @Entry
@Component @Component
struct ArcTo { struct ArcTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true,true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private path2Db: Path2D = new Path2D() private path2Db: Path2D = new Path2D()
...@@ -835,8 +835,8 @@ Draws an ellipse in the specified rectangular region. ...@@ -835,8 +835,8 @@ Draws an ellipse in the specified rectangular region.
``` ```
@Entry @Entry
@Component @Component
struct Ellipse { struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true,true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private path2Db: Path2D = new Path2D() private path2Db: Path2D = new Path2D()
...@@ -933,8 +933,8 @@ Creates a rectangle. ...@@ -933,8 +933,8 @@ Creates a rectangle.
``` ```
@Entry @Entry
@Component @Component
struct Rect { struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true,true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private path2Db: Path2D = new Path2D() private path2Db: Path2D = new Path2D()
...@@ -956,4 +956,3 @@ Creates a rectangle. ...@@ -956,4 +956,3 @@ Creates a rectangle.
![](figures/en-us_image_0000001192755174.png) ![](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 ...@@ -260,7 +260,7 @@ OffscreenCanvasRenderingContext2D\(width: number, height: number, setting: Rende
@Entry @Entry
@Component @Component
struct FillStyleExample { struct FillStyleExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true,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)
...@@ -291,7 +291,7 @@ struct FillStyleExample { ...@@ -291,7 +291,7 @@ struct FillStyleExample {
@Entry @Entry
@Component @Component
struct LineWidthExample { struct LineWidthExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true,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)
...@@ -322,7 +322,7 @@ struct LineWidthExample { ...@@ -322,7 +322,7 @@ struct LineWidthExample {
@Entry @Entry
@Component @Component
struct StrokeStyleExample { struct StrokeStyleExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true,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)
...@@ -354,7 +354,7 @@ struct StrokeStyleExample { ...@@ -354,7 +354,7 @@ struct StrokeStyleExample {
@Entry @Entry
@Component @Component
struct LineCapExample { struct LineCapExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true,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)
...@@ -389,7 +389,7 @@ struct LineCapExample { ...@@ -389,7 +389,7 @@ struct LineCapExample {
@Entry @Entry
@Component @Component
struct LineJoinExample { struct LineJoinExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true,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)
...@@ -425,7 +425,7 @@ struct LineJoinExample { ...@@ -425,7 +425,7 @@ struct LineJoinExample {
@Entry @Entry
@Component @Component
struct MiterLimit { struct MiterLimit {
private settings: RenderingContextSettings = new RenderingContextSettings(true,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)
...@@ -461,7 +461,7 @@ struct MiterLimit { ...@@ -461,7 +461,7 @@ struct MiterLimit {
@Entry @Entry
@Component @Component
struct Font { struct Font {
private settings: RenderingContextSettings = new RenderingContextSettings(true,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)
...@@ -491,8 +491,8 @@ struct Font { ...@@ -491,8 +491,8 @@ struct Font {
``` ```
@Entry @Entry
@Component @Component
struct TextAlign { struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true,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)
...@@ -538,7 +538,7 @@ struct TextAlign { ...@@ -538,7 +538,7 @@ struct TextAlign {
@Entry @Entry
@Component @Component
struct TextBaseline { struct TextBaseline {
private settings: RenderingContextSettings = new RenderingContextSettings(true,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)
...@@ -584,7 +584,7 @@ struct TextBaseline { ...@@ -584,7 +584,7 @@ struct TextBaseline {
@Entry @Entry
@Component @Component
struct GlobalAlpha { struct GlobalAlpha {
private settings: RenderingContextSettings = new RenderingContextSettings(true,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)
...@@ -618,7 +618,7 @@ struct GlobalAlpha { ...@@ -618,7 +618,7 @@ struct GlobalAlpha {
@Entry @Entry
@Component @Component
struct LineDashOffset { struct LineDashOffset {
private settings: RenderingContextSettings = new RenderingContextSettings(true,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)
...@@ -715,7 +715,7 @@ struct LineDashOffset { ...@@ -715,7 +715,7 @@ struct LineDashOffset {
@Entry @Entry
@Component @Component
struct GlobalCompositeOperation { struct GlobalCompositeOperation {
private settings: RenderingContextSettings = new RenderingContextSettings(true,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)
...@@ -754,7 +754,7 @@ struct GlobalCompositeOperation { ...@@ -754,7 +754,7 @@ struct GlobalCompositeOperation {
@Entry @Entry
@Component @Component
struct ShadowBlur { struct ShadowBlur {
private settings: RenderingContextSettings = new RenderingContextSettings(true,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)
...@@ -787,7 +787,7 @@ struct ShadowBlur { ...@@ -787,7 +787,7 @@ struct ShadowBlur {
@Entry @Entry
@Component @Component
struct ShadowColor { struct ShadowColor {
private settings: RenderingContextSettings = new RenderingContextSettings(true,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)
...@@ -821,7 +821,7 @@ struct ShadowColor { ...@@ -821,7 +821,7 @@ struct ShadowColor {
@Entry @Entry
@Component @Component
struct ShadowOffsetX { struct ShadowOffsetX {
private settings: RenderingContextSettings = new RenderingContextSettings(true,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)
...@@ -855,7 +855,7 @@ struct ShadowOffsetX { ...@@ -855,7 +855,7 @@ struct ShadowOffsetX {
@Entry @Entry
@Component @Component
struct ShadowOffsetY { struct ShadowOffsetY {
private settings: RenderingContextSettings = new RenderingContextSettings(true,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)
...@@ -889,7 +889,7 @@ struct ShadowOffsetY { ...@@ -889,7 +889,7 @@ struct ShadowOffsetY {
@Entry @Entry
@Component @Component
struct ImageSmoothingEnabled { struct ImageSmoothingEnabled {
private settings: RenderingContextSettings = new RenderingContextSettings(true,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/icon.jpg") private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
...@@ -991,7 +991,7 @@ Fills a rectangle on the canvas. ...@@ -991,7 +991,7 @@ Fills a rectangle on the canvas.
@Entry @Entry
@Component @Component
struct FillRect { struct FillRect {
private settings: RenderingContextSettings = new RenderingContextSettings(true,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)
...@@ -1091,7 +1091,7 @@ Draws a rectangle stroke on the canvas. ...@@ -1091,7 +1091,7 @@ Draws a rectangle stroke on the canvas.
@Entry @Entry
@Component @Component
struct StrokeRect { struct StrokeRect {
private settings: RenderingContextSettings = new RenderingContextSettings(true,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() {
...@@ -1190,7 +1190,7 @@ Clears the content in a rectangle on the canvas. ...@@ -1190,7 +1190,7 @@ Clears the content in a rectangle on the canvas.
@Entry @Entry
@Component @Component
struct ClearRect { struct ClearRect {
private settings: RenderingContextSettings = new RenderingContextSettings(true,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() {
...@@ -1280,7 +1280,7 @@ Draws filled text on the canvas. ...@@ -1280,7 +1280,7 @@ Draws filled text on the canvas.
@Entry @Entry
@Component @Component
struct FillText { struct FillText {
private settings: RenderingContextSettings = new RenderingContextSettings(true,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() {
...@@ -1369,7 +1369,7 @@ Draws a text stroke on the canvas. ...@@ -1369,7 +1369,7 @@ Draws a text stroke on the canvas.
@Entry @Entry
@Component @Component
struct StrokeText { struct StrokeText {
private settings: RenderingContextSettings = new RenderingContextSettings(true,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() {
...@@ -1474,7 +1474,7 @@ Returns a **TextMetrics** object used to obtain the width of specified text. ...@@ -1474,7 +1474,7 @@ Returns a **TextMetrics** object used to obtain the width of specified text.
@Entry @Entry
@Component @Component
struct MeasureText { struct MeasureText {
private settings: RenderingContextSettings = new RenderingContextSettings(true,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() {
...@@ -1541,10 +1541,10 @@ Strokes a path. ...@@ -1541,10 +1541,10 @@ Strokes a path.
``` ```
@Entry @Entry
@Component @Component
struct Stroke { struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true,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 OffscreenRenderingContext(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)
...@@ -1581,7 +1581,7 @@ Creates a drawing path. ...@@ -1581,7 +1581,7 @@ Creates a drawing path.
@Entry @Entry
@Component @Component
struct BeginPath { struct BeginPath {
private settings: RenderingContextSettings = new RenderingContextSettings(true,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() {
...@@ -1663,7 +1663,7 @@ Moves a drawing path to a target position on the canvas. ...@@ -1663,7 +1663,7 @@ Moves a drawing path to a target position on the canvas.
@Entry @Entry
@Component @Component
struct MoveTo { struct MoveTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true,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() {
...@@ -1743,7 +1743,7 @@ Connects the current point to a target position using a straight line. ...@@ -1743,7 +1743,7 @@ Connects the current point to a target position using a straight line.
@Entry @Entry
@Component @Component
struct LineTo { struct LineTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true,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() {
...@@ -1782,7 +1782,7 @@ Draws a closed path. ...@@ -1782,7 +1782,7 @@ Draws a closed path.
@Entry @Entry
@Component @Component
struct ClosePath { struct ClosePath {
private settings: RenderingContextSettings = new RenderingContextSettings(true,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() {
...@@ -1863,7 +1863,7 @@ Creates a pattern for image filling based on a specified source image and repeti ...@@ -1863,7 +1863,7 @@ Creates a pattern for image filling based on a specified source image and repeti
@Entry @Entry
@Component @Component
struct CreatePattern { struct CreatePattern {
private settings: RenderingContextSettings = new RenderingContextSettings(true,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/icon.jpg") private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
...@@ -1987,7 +1987,7 @@ Draws a cubic bezier curve on the canvas. ...@@ -1987,7 +1987,7 @@ Draws a cubic bezier curve on the canvas.
@Entry @Entry
@Component @Component
struct BezierCurveTo { struct BezierCurveTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true,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() {
...@@ -2089,7 +2089,7 @@ Draws a quadratic curve on the canvas. ...@@ -2089,7 +2089,7 @@ Draws a quadratic curve on the canvas.
@Entry @Entry
@Component @Component
struct QuadraticCurveTo { struct QuadraticCurveTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true,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() {
...@@ -2212,7 +2212,7 @@ Draws an arc on the canvas. ...@@ -2212,7 +2212,7 @@ Draws an arc on the canvas.
@Entry @Entry
@Component @Component
struct Arc { struct Arc {
private settings: RenderingContextSettings = new RenderingContextSettings(true,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() {
...@@ -2324,7 +2324,7 @@ Draws an arc based on the radius and points on the arc. ...@@ -2324,7 +2324,7 @@ Draws an arc based on the radius and points on the arc.
@Entry @Entry
@Component @Component
struct ArcTo { struct ArcTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true,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() {
...@@ -2468,8 +2468,8 @@ Draws an ellipse in the specified rectangular region. ...@@ -2468,8 +2468,8 @@ Draws an ellipse in the specified rectangular region.
``` ```
@Entry @Entry
@Component @Component
struct Ellipse { struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true,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() {
...@@ -2569,8 +2569,8 @@ Creates a rectangle. ...@@ -2569,8 +2569,8 @@ Creates a rectangle.
``` ```
@Entry @Entry
@Component @Component
struct Rect { struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true,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() {
...@@ -2607,7 +2607,7 @@ Fills the area inside a closed path. ...@@ -2607,7 +2607,7 @@ Fills the area inside a closed path.
@Entry @Entry
@Component @Component
struct Fill { struct Fill {
private settings: RenderingContextSettings = new RenderingContextSettings(true,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() {
...@@ -2644,7 +2644,7 @@ Sets the current path to a clipping path. ...@@ -2644,7 +2644,7 @@ Sets the current path to a clipping path.
@Entry @Entry
@Component @Component
struct Clip { struct Clip {
private settings: RenderingContextSettings = new RenderingContextSettings(true,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() {
...@@ -2714,7 +2714,7 @@ Rotates a canvas clockwise around its coordinate axes. ...@@ -2714,7 +2714,7 @@ Rotates a canvas clockwise around its coordinate axes.
@Entry @Entry
@Component @Component
struct Rotate { struct Rotate {
private settings: RenderingContextSettings = new RenderingContextSettings(true,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() {
...@@ -2792,7 +2792,7 @@ Scales a canvas based on scaling factors. ...@@ -2792,7 +2792,7 @@ Scales a canvas based on scaling factors.
@Entry @Entry
@Component @Component
struct Scale { struct Scale {
private settings: RenderingContextSettings = new RenderingContextSettings(true,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() {
...@@ -2919,7 +2919,7 @@ Defines a transformation matrix. To transform a graph, you only need to set para ...@@ -2919,7 +2919,7 @@ Defines a transformation matrix. To transform a graph, you only need to set para
@Entry @Entry
@Component @Component
struct Transform { struct Transform {
private settings: RenderingContextSettings = new RenderingContextSettings(true,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() {
...@@ -3046,7 +3046,7 @@ Resets the existing transformation matrix and creates a new transformation matri ...@@ -3046,7 +3046,7 @@ Resets the existing transformation matrix and creates a new transformation matri
@Entry @Entry
@Component @Component
struct SetTransform { struct SetTransform {
private settings: RenderingContextSettings = new RenderingContextSettings(true,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() {
...@@ -3126,7 +3126,7 @@ Moves the origin of the coordinate system. ...@@ -3126,7 +3126,7 @@ Moves the origin of the coordinate system.
@Entry @Entry
@Component @Component
struct Translate { struct Translate {
private settings: RenderingContextSettings = new RenderingContextSettings(true,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() {
...@@ -3286,7 +3286,7 @@ Draws an image. ...@@ -3286,7 +3286,7 @@ Draws an image.
@Entry @Entry
@Component @Component
struct Index { struct Index {
private settings: RenderingContextSettings = new RenderingContextSettings(true,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/icon.jpg") private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) 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 ...@@ -3570,7 +3570,7 @@ Puts the [ImageData](ts-components-canvas-imagedata.md) onto a rectangular are
@Entry @Entry
@Component @Component
struct PutImageData { struct PutImageData {
private settings: RenderingContextSettings = new RenderingContextSettings(true,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() {
...@@ -3612,8 +3612,8 @@ Restores the saved drawing context. ...@@ -3612,8 +3612,8 @@ Restores the saved drawing context.
``` ```
@Entry @Entry
@Component @Component
struct Restore { struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true,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() {
...@@ -3647,7 +3647,7 @@ Saves the current drawing context. ...@@ -3647,7 +3647,7 @@ Saves the current drawing context.
@Entry @Entry
@Component @Component
struct Restore { struct Restore {
private settings: RenderingContextSettings = new RenderingContextSettings(true,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() {
...@@ -3743,9 +3743,8 @@ Creates a linear gradient. ...@@ -3743,9 +3743,8 @@ Creates a linear gradient.
@Entry @Entry
@Component @Component
struct CreateLinearGradient { struct CreateLinearGradient {
private settings: RenderingContextSettings = new RenderingContextSettings(true,true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private gra:CanvasGradient = new CanvasGradient()
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 }) {
...@@ -3755,9 +3754,9 @@ Creates a linear gradient. ...@@ -3755,9 +3754,9 @@ Creates a linear gradient.
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
var grad = this.offContext.createLinearGradient(50,0, 300,100) var grad = this.offContext.createLinearGradient(50,0, 300,100)
this.gra.addColorStop(0.0, 'red') gra.addColorStop(0.0, 'red')
this.gra.addColorStop(0.5, 'white') gra.addColorStop(0.5, 'white')
this.gra.addColorStop(1.0, 'green') gra.addColorStop(1.0, 'green')
this.offContext.fillStyle = grad this.offContext.fillStyle = grad
this.offContext.fillRect(0, 0, 500, 500) this.offContext.fillRect(0, 0, 500, 500)
var image = this.offContext.transferToImageBitmap() var image = this.offContext.transferToImageBitmap()
...@@ -3769,8 +3768,8 @@ Creates a linear gradient. ...@@ -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> ### createRadialGradient<a name="section136731637204919"></a>
...@@ -3869,9 +3868,8 @@ Creates a linear gradient. ...@@ -3869,9 +3868,8 @@ Creates a linear gradient.
@Entry @Entry
@Component @Component
struct CreateRadialGradient { struct CreateRadialGradient {
private settings: RenderingContextSettings = new RenderingContextSettings(true,true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private gra:CanvasGradient = new CanvasGradient()
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 }) {
...@@ -3881,9 +3879,9 @@ Creates a linear gradient. ...@@ -3881,9 +3879,9 @@ Creates a linear gradient.
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
var grad = this.offContext.createRadialGradient(200,200,50, 200,200,200) var grad = this.offContext.createRadialGradient(200,200,50, 200,200,200)
this.gra.addColorStop(0.0, 'red') gra.addColorStop(0.0, 'red')
this.gra.addColorStop(0.5, 'white') gra.addColorStop(0.5, 'white')
this.gra.addColorStop(1.0, 'green') gra.addColorStop(1.0, 'green')
this.offContext.fillStyle = grad this.offContext.fillStyle = grad
this.offContext.fillRect(0, 0, 500, 500) this.offContext.fillRect(0, 0, 500, 500)
var image = this.offContext.transferToImageBitmap() var image = this.offContext.transferToImageBitmap()
...@@ -3895,8 +3893,8 @@ Creates a linear gradient. ...@@ -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> ## CanvasPattern<a name="section146853345417"></a>
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或