提交 d3a80b29 编写于 作者: L lanyill

Canvas js文档整改

Signed-off-by: Nlanyill <lanyi3@huawei.com>
上级 b9076754
......@@ -584,7 +584,7 @@ fillRect(x: number, y: number, width:number, height: number): void
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 500px; height: 500px; "></canvas>
<canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
</div>
```
......@@ -620,7 +620,7 @@ clearRect(x: number, y: number, width:number, height: number): void
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 500px; height: 500px;"></canvas>
<canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
</div>
```
......
......@@ -94,12 +94,36 @@ isPointInPath(path?: Path2D, x: number, y: number): boolean
**示例:**
```html
<!-- xxx.hml -->
<div style="width: 500px; height: 500px;">
<text>In path:{{textValue}}</text>
<canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
<div class="container" style="width: 500px; height: 500px;">
<text class="textsize">In path:{{textValue}}</text>
<canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
</div>
```
```css
/* xxx.css */
.container {
display: flex;
flex-direction: column;
background-color: #F1F3F5;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
canvas {
width: 600px;
height: 600px;
background-color: #fdfdfd;
border: none;
}
.textsize {
font-size: 40px;
}
```
```js
// xxx.js
export default {
......@@ -144,12 +168,36 @@ isPointInStroke(path?: Path2D, x: number, y: number): boolean
**示例:**
```html
<!-- xxx.hml -->
<div style="width: 500px; height: 500px;">
<text>In path:{{textValue}}</text>
<canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
<div class="container" style="width: 500px; height: 500px;">
<text class="textsize">In stroke:{{textValue}}</text>
<canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
</div>
```
```css
/* xxx.css */
.container {
display: flex;
flex-direction: column;
background-color: #F1F3F5;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
canvas {
width: 600px;
height: 600px;
background-color: #fdfdfd;
border: none;
}
.textsize {
font-size: 40px;
}
```
```js
// xxx.js
export default {
......@@ -180,12 +228,36 @@ resetTransform(): void
**示例:**
```html
<!-- xxx.hml -->
<div style="width: 500px; height: 500px;">
<text>In path:{{textValue}}</text>
<canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
<div class="container" style="width: 500px; height: 500px;">
<text class="textsize">In path:{{textValue}}</text>
<canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
</div>
```
```css
/* xxx.css */
.container {
display: flex;
flex-direction: column;
background-color: #F1F3F5;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
canvas {
width: 600px;
height: 600px;
background-color: #fdfdfd;
border: none;
}
.textsize {
font-size: 40px;
}
```
```js
// xxx.js
export default {
......
......@@ -60,7 +60,7 @@ export default {
path.closePath();
// 门
path.moveTo(250, 450);
path.rect(250, 450, 350, 600);
path.rect(250, 450, 100, 600);
path.closePath();
// 烟囱
path.moveTo(365, 250);
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册