Skip to content

D
Docs

OpenHarmony / Docs
8 个月 前同步成功

通知 157
Star 292
Fork 28
D
Docs

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 71d480cc 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!894 update JS开发参考 

Merge pull request !894 from zengyawen/master
上级 86cdb02b 51f00dff
隐藏空白更改
内联 并排
Showing with 823 addition and 364 deletion
zh-cn/application-dev/js-reference/apis/js-apis-basic-features-animator.md
浏览文件 @ 71d480cc
......@@ -439,7 +439,6 @@ createAnimator\(options\[...\]\): void
```
// js
import Animator from "@ohos.animator";
export default {
data : {
divWidth: 200,
......@@ -455,7 +454,7 @@ createAnimator\(options\[...\]\): void
begin: 200.0,
end: 400.0
};
this.animator = Animator.createAnimator(options);
this.animator = animator.createAnimator(options);
},
Show() {
var options1 = {
......
zh-cn/application-dev/js-reference/apis/js-apis-basic-features-app-context.md
浏览文件 @ 71d480cc
......@@ -62,9 +62,12 @@ getInfo\(\): <[AppResponse](#t3e93239d9b134b80957bcdd4acb05291)\>
- 示例
```
var info = app.getInfo();
console.log(JSON.stringify(info));
export default {
getInfo(){
var info = app.getInfo();
console.log(JSON.stringify(info));
}
}
```
......@@ -77,8 +80,10 @@ terminate\(\): void
- 示例
```
app.terminate();
export default {
terminate(){
app.terminate();
}}
```
zh-cn/application-dev/js-reference/apis/js-apis-basic-features-configuration.md
浏览文件 @ 71d480cc
......@@ -65,9 +65,12 @@ getLocale\(\): <[LocaleResponse](#table1544853546)\>
- 示例
```
const localeInfo = configuration.getLocale();
console.info(localeInfo.language);
export default {
getLocale() {
const localeInfo = configuration.getLocale();
console.info(localeInfo.language);
}
}
```
zh-cn/application-dev/js-reference/apis/js-apis-basic-features-logs.md
浏览文件 @ 71d480cc
......@@ -171,12 +171,15 @@ error\(message: string\): void
## 示例<a name="section738673813104"></a>
```
var versionCode = 1;
console.info('Hello World. The current version code is ' + versionCode);
console.log(`versionCode: ${versionCode}`)
// 以下写法从API Version 6开始支持
console.log('versionCode:%d.', versionCode);
export default {
clickConsole(){
var versionCode = 1;
console.info('Hello World. The current version code is ' + versionCode);
console.log(`versionCode: ${versionCode}`);
// 以下写法从API Version 6开始支持
console.log('versionCode:%d.', versionCode);
}
}
```
在DevEco Studio的底部，切换到“HiLog”窗口。选择当前的设备及进程，日志级别选择Info，搜索内容设置为“Hello World”。此时窗口仅显示符合条件的日志，效果如图所示：
......
zh-cn/application-dev/js-reference/apis/js-apis-basic-features-pop-up.md
浏览文件 @ 71d480cc
......@@ -66,11 +66,14 @@ showToast\(Object\): void
- 示例
```
prompt.showToast({
message: 'Message Info',
duration: 2000,
});
export default {
showToast() {
prompt.showToast({
message: 'Message Info',
duration: 2000,
});
}
}
```
......@@ -174,23 +177,26 @@ showDialog\(\): void
- 示例
```
prompt.showDialog({
title: 'Title Info',
message: 'Message Info',
buttons: [
{
text: 'button',
color: '#666666',
},
],
success: function(data) {
console.log('dialog success callback，click button : ' + data.index);
},
cancel: function() {
console.log('dialog cancel callback');
},
});
export default {
showDialog() {
prompt.showDialog({
title: 'Title Info',
message: 'Message Info',
buttons: [
{
text: 'button',
color: '#666666',
},
],
success: function(data) {
console.log('dialog success callback，click button : ' + data.index);
},
cancel: function() {
console.log('dialog cancel callback');
},
});
}
}
```
......@@ -285,26 +291,29 @@ showActionMenu\(Object\): void
- 示例
```
prompt.showActionMenu({
title: 'Title Info',
buttons: [
{
text: 'item1',
color: '#666666',
},
{
text: 'item2',
color: '#000000',
},
],
success: function(data) {
console.log('dialog success callback，click button : ' + data.tapIndex);
},
fail: function(data) {
console.log('dialog fail callback' + data.errMsg);
},
});
export default {
showActionMenu() {
prompt.showActionMenu({
title: 'Title Info',
buttons: [
{
text: 'item1',
color: '#666666',
},
{
text: 'item2',
color: '#000000',
},
],
success: function(data) {
console.log('dialog success callback，click button : ' + data.tapIndex);
},
fail: function(data) {
console.log('dialog fail callback' + data.errMsg);
},
});
}
}
```
zh-cn/application-dev/js-reference/apis/js-apis-basic-features-routes.md
浏览文件 @ 71d480cc
......@@ -194,21 +194,41 @@ back\(Object\): void
```
// index页面
router.push({
uri: 'pages/detail/detail',
});
export default {
indexPushPage() {
router.push({
uri: 'pages/detail/detail',
});
}
}
// detail页面
router.push({
uri: 'pages/mall/mall',
});
export default {
detailPushPage() {
router.push({
uri: 'pages/mall/mall',
});
}
}
// mall页面通过back，将返回detail页面
router.back();
export default {
mallBackPage() {
router.back();
}
}
// detail页面通过back，将返回index页面
router.back();
export default {
defaultBack() {
router.back();
}
}
// 通过back，返回到detail页面
router.back({uri:'pages/detail/detail'});
export default {
backToDetail() {
router.back({uri:'pages/detail/detail'});
}
}
```
>![](../../public_sys-resources/icon-note.gif) **说明：**
......@@ -224,8 +244,11 @@ clear\(\): void
- 示例
```
router.clear();
export default {
clearPage() {
router.clear();
}
}
```
......@@ -255,9 +278,12 @@ getLength\(\): string
- 示例
```
var size = router.getLength();
console.log('pages stack size = ' + size);
export default {
getLength() {
var size = router.getLength();
console.log('pages stack size = ' + size);
}
}
```
......@@ -309,11 +335,14 @@ getState\(\): <[RouterState](#tf9e3eb9ef0aa4d9880f996fe6afa6d1b)\>
- 示例
```
var page = router.getState();
console.log('current index = ' + page.index);
console.log('current name = ' + page.name);
console.log('current path = ' + page.path);
export default {
getState() {
var page = router.getState();
console.log('current index = ' + page.index);
console.log('current name = ' + page.name);
console.log('current path = ' + page.path);
}
}
```
......@@ -378,16 +407,19 @@ enableAlertBeforeBackPage\(Object\): void
- 示例
```
router.enableAlertBeforeBackPage({
message: 'Message Info',
success: function() {
console.log('success');
},
fail: function() {
console.log('fail');
},
});
export default {
enableAlertBeforeBackPage() {
router.enableAlertBeforeBackPage({
message: 'Message Info',
success: function() {
console.log('success');
},
fail: function() {
console.log('fail');
},
});
}
}
```
......@@ -443,15 +475,18 @@ disableAlertBeforeBackPage\(Object\): void
- 示例
```
router.disableAlertBeforeBackPage({
success: function() {
console.log('success');
},
fail: function() {
console.log('fail');
},
});
export default {
disableAlertBeforeBackPage() {
router.disableAlertBeforeBackPage({
success: function() {
console.log('success');
},
fail: function() {
console.log('fail');
},
});
}
}
```
zh-cn/application-dev/js-reference/apis/js-apis-basic-features-timer.md
浏览文件 @ 71d480cc
......@@ -60,15 +60,15 @@ setTimeout\(handler\[,delay\[,…args\]\]\): number
- 返回值
<a name="table1430416594311"></a>
<table><thead align="left"><tr id="row230485973113"><th class="cellrowborder" valign="top" width="12.18%" id="mcps1.1.3.1.1"><p id="p430405913312"><a name="p430405913312"></a><a name="p430405913312"></a>类型</p>
<table><thead align="left"><tr id="row230485973113"><th class="cellrowborder" valign="top" width="15.97%" id="mcps1.1.3.1.1"><p id="p430405913312"><a name="p430405913312"></a><a name="p430405913312"></a>类型</p>
</th>
<th class="cellrowborder" valign="top" width="87.82%" id="mcps1.1.3.1.2"><p id="p830413599312"><a name="p830413599312"></a><a name="p830413599312"></a>说明</p>
<th class="cellrowborder" valign="top" width="84.03%" id="mcps1.1.3.1.2"><p id="p830413599312"><a name="p830413599312"></a><a name="p830413599312"></a>说明</p>
</th>
</tr>
</thead>
<tbody><tr id="row130435914317"><td class="cellrowborder" valign="top" width="12.18%" headers="mcps1.1.3.1.1 "><p id="p4305759143119"><a name="p4305759143119"></a><a name="p4305759143119"></a>number</p>
<tbody><tr id="row130435914317"><td class="cellrowborder" valign="top" width="15.97%" headers="mcps1.1.3.1.1 "><p id="p4305759143119"><a name="p4305759143119"></a><a name="p4305759143119"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="87.82%" headers="mcps1.1.3.1.2 "><p id="p130555923110"><a name="p130555923110"></a><a name="p130555923110"></a>timeout定时器的ID。</p>
<td class="cellrowborder" valign="top" width="84.03%" headers="mcps1.1.3.1.2 "><p id="p130555923110"><a name="p130555923110"></a><a name="p130555923110"></a>timeout定时器的ID。</p>
</td>
</tr>
</tbody>
......@@ -77,10 +77,13 @@ setTimeout\(handler\[,delay\[,…args\]\]\): number
- 示例
```
var timeoutID = setTimeout(function() {
console.log('delay 1s');
}, 1000);
export default {
setTimeOut() {
var timeoutID = setTimeout(function() {
console.log('delay 1s');
}, 1000);
}
}
```
......@@ -118,12 +121,14 @@ clearTimeout\(timeoutID: number\): void
- 示例
```
var timeoutID = setTimeout(function() {
console.log('do after 1s delay.');
}, 1000);
clearTimeout(timeoutID);
export default {
clearTimeOut() {
var timeoutID = setTimeout(function() {
console.log('do after 1s delay.');
}, 1000);
clearTimeout(timeoutID);
}
}
```
......@@ -196,10 +201,13 @@ setInterval\(handler\[, delay\[, ...args\]\]\): number
- 示例
```
var intervalID = setInterval(function() {
console.log('do very 1s.');
}, 1000);
export default {
setInterval() {
var intervalID = setInterval(function() {
console.log('do very 1s.');
}, 1000);
}
}
```
......@@ -237,12 +245,14 @@ clearInterval\(intervalID: number\): void
- 示例
```
var intervalID = setInterval(function() {
console.log('do very 1s.');
}, 1000);
clearInterval(intervalID);
export default {
clearInterval() {
var intervalID = setInterval(function() {
console.log('do very 1s.');
}, 1000);
clearInterval(intervalID);
}
}
```
zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-appendix-types.md
浏览文件 @ 71d480cc
......@@ -118,7 +118,7 @@
</td>
<td class="cellrowborder" valign="top" width="36.44%" headers="mcps1.2.4.1.2 "><p id="p19954173420433"><a name="p19954173420433"></a><a name="p19954173420433"></a>#000000</p>
</td>
<td class="cellrowborder" valign="top" width="30.85%" headers="mcps1.2.4.1.3 "><p id="p1782641372612"><a name="p1782641372612"></a><a name="p1782641372612"></a><a name="image1826213162617"></a><a name="image1826213162617"></a><span><img id="image1826213162617" src="figures/000000-3.png"></span></p>
<td class="cellrowborder" valign="top" width="30.85%" headers="mcps1.2.4.1.3 "><p id="p1782641372612"><a name="p1782641372612"></a><a name="p1782641372612"></a><a name="image1826213162617"></a><a name="image1826213162617"></a><span><img id="image1826213162617" src="figures/000000-5.png"></span></p>
</td>
</tr>
<tr id="row17880250144216"><td class="cellrowborder" valign="top" width="32.71%" headers="mcps1.2.4.1.1 "><p id="p119544349431"><a name="p119544349431"></a><a name="p119544349431"></a>blanchedalmond</p>
......@@ -993,7 +993,7 @@
</td>
<td class="cellrowborder" valign="top" width="36.44%" headers="mcps1.2.4.1.2 "><p id="p139671234134310"><a name="p139671234134310"></a><a name="p139671234134310"></a>#708090</p>
</td>
<td class="cellrowborder" valign="top" width="30.85%" headers="mcps1.2.4.1.3 "><p id="p74881432316"><a name="p74881432316"></a><a name="p74881432316"></a><a name="image7301503270"></a><a name="image7301503270"></a><span><img id="image7301503270" src="figures/slategray-4.png"></span></p>
<td class="cellrowborder" valign="top" width="30.85%" headers="mcps1.2.4.1.3 "><p id="p74881432316"><a name="p74881432316"></a><a name="p74881432316"></a><a name="image7301503270"></a><a name="image7301503270"></a><span><img id="image7301503270" src="figures/slategray-6.png"></span></p>
</td>
</tr>
<tr id="row138922050154211"><td class="cellrowborder" valign="top" width="32.71%" headers="mcps1.2.4.1.1 "><p id="p796733464316"><a name="p796733464316"></a><a name="p796733464316"></a>snow</p>
......
zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-button.md
浏览文件 @ 71d480cc
......@@ -393,14 +393,14 @@
// xxx.js
export default {
data: {
progress: 5,
count: 5,
downloadText: "Download"
},
progress(e) {
this.progress += 10;
this.downloadText = this.progress + "%";
this.$element('download-btn').setProgress({ progress: this.progress });
if (this.progress >= 100) {
this.count+= 10;
this.downloadText = this.count+ "%";
this.$element('download-btn').setProgress({ progress: this.count});
if (this.count>= 100) {
this.downloadText = "Done";
}
}
......
zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-chart.md
浏览文件 @ 71d480cc
......@@ -231,11 +231,11 @@
</th>
<th class="cellrowborder" valign="top" width="12.91%" id="mcps1.2.6.1.2"><p id="p2083515012555"><a name="p2083515012555"></a><a name="p2083515012555"></a>类型</p>
</th>
<th class="cellrowborder" valign="top" width="8.870000000000001%" id="mcps1.2.6.1.3"><p id="p1283545016551"><a name="p1283545016551"></a><a name="p1283545016551"></a>默认值</p>
<th class="cellrowborder" valign="top" width="11.75%" id="mcps1.2.6.1.3"><p id="p1283545016551"><a name="p1283545016551"></a><a name="p1283545016551"></a>默认值</p>
</th>
<th class="cellrowborder" valign="top" width="7.02%" id="mcps1.2.6.1.4"><p id="p18351650135519"><a name="p18351650135519"></a><a name="p18351650135519"></a>必填</p>
<th class="cellrowborder" valign="top" width="10.059999999999999%" id="mcps1.2.6.1.4"><p id="p18351650135519"><a name="p18351650135519"></a><a name="p18351650135519"></a>必填</p>
</th>
<th class="cellrowborder" valign="top" width="61.019999999999996%" id="mcps1.2.6.1.5"><p id="p10835105017555"><a name="p10835105017555"></a><a name="p10835105017555"></a>描述</p>
<th class="cellrowborder" valign="top" width="55.1%" id="mcps1.2.6.1.5"><p id="p10835105017555"><a name="p10835105017555"></a><a name="p10835105017555"></a>描述</p>
</th>
</tr>
</thead>
......@@ -243,11 +243,11 @@
</td>
<td class="cellrowborder" valign="top" width="12.91%" headers="mcps1.2.6.1.2 "><p id="p14313429185211"><a name="p14313429185211"></a><a name="p14313429185211"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="8.870000000000001%" headers="mcps1.2.6.1.3 "><p id="p19313152995219"><a name="p19313152995219"></a><a name="p19313152995219"></a>0</p>
<td class="cellrowborder" valign="top" width="11.75%" headers="mcps1.2.6.1.3 "><p id="p19313152995219"><a name="p19313152995219"></a><a name="p19313152995219"></a>0</p>
</td>
<td class="cellrowborder" valign="top" width="7.02%" headers="mcps1.2.6.1.4 "><p id="p03131429165220"><a name="p03131429165220"></a><a name="p03131429165220"></a>否</p>
<td class="cellrowborder" valign="top" width="10.059999999999999%" headers="mcps1.2.6.1.4 "><p id="p03131429165220"><a name="p03131429165220"></a><a name="p03131429165220"></a>否</p>
</td>
<td class="cellrowborder" valign="top" width="61.019999999999996%" headers="mcps1.2.6.1.5 "><p id="p15313529165215"><a name="p15313529165215"></a><a name="p15313529165215"></a>轴的最小值。</p>
<td class="cellrowborder" valign="top" width="55.1%" headers="mcps1.2.6.1.5 "><p id="p15313529165215"><a name="p15313529165215"></a><a name="p15313529165215"></a>轴的最小值。</p>
<div class="note" id="note947711273197"><a name="note947711273197"></a><a name="note947711273197"></a><span class="notetitle"> 说明： </span><div class="notebody"><p id="p5477102781911"><a name="p5477102781911"></a><a name="p5477102781911"></a>仅线形图支持负数。</p>
</div></div>
</td>
......@@ -256,11 +256,11 @@
</td>
<td class="cellrowborder" valign="top" width="12.91%" headers="mcps1.2.6.1.2 "><p id="p11771076557"><a name="p11771076557"></a><a name="p11771076557"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="8.870000000000001%" headers="mcps1.2.6.1.3 "><p id="p13177127165511"><a name="p13177127165511"></a><a name="p13177127165511"></a>100</p>
<td class="cellrowborder" valign="top" width="11.75%" headers="mcps1.2.6.1.3 "><p id="p13177127165511"><a name="p13177127165511"></a><a name="p13177127165511"></a>100</p>
</td>
<td class="cellrowborder" valign="top" width="7.02%" headers="mcps1.2.6.1.4 "><p id="p171774715517"><a name="p171774715517"></a><a name="p171774715517"></a>否</p>
<td class="cellrowborder" valign="top" width="10.059999999999999%" headers="mcps1.2.6.1.4 "><p id="p171774715517"><a name="p171774715517"></a><a name="p171774715517"></a>否</p>
</td>
<td class="cellrowborder" valign="top" width="61.019999999999996%" headers="mcps1.2.6.1.5 "><p id="p111771705519"><a name="p111771705519"></a><a name="p111771705519"></a>轴的最大值。</p>
<td class="cellrowborder" valign="top" width="55.1%" headers="mcps1.2.6.1.5 "><p id="p111771705519"><a name="p111771705519"></a><a name="p111771705519"></a>轴的最大值。</p>
<div class="note" id="note1287217389195"><a name="note1287217389195"></a><a name="note1287217389195"></a><span class="notetitle"> 说明： </span><div class="notebody"><p id="p17872153817197"><a name="p17872153817197"></a><a name="p17872153817197"></a>仅线形图支持负数。</p>
</div></div>
</td>
......@@ -269,11 +269,11 @@
</td>
<td class="cellrowborder" valign="top" width="12.91%" headers="mcps1.2.6.1.2 "><p id="p844011745512"><a name="p844011745512"></a><a name="p844011745512"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="8.870000000000001%" headers="mcps1.2.6.1.3 "><p id="p9440277558"><a name="p9440277558"></a><a name="p9440277558"></a>10</p>
<td class="cellrowborder" valign="top" width="11.75%" headers="mcps1.2.6.1.3 "><p id="p9440277558"><a name="p9440277558"></a><a name="p9440277558"></a>10</p>
</td>
<td class="cellrowborder" valign="top" width="7.02%" headers="mcps1.2.6.1.4 "><p id="p194406755518"><a name="p194406755518"></a><a name="p194406755518"></a>否</p>
<td class="cellrowborder" valign="top" width="10.059999999999999%" headers="mcps1.2.6.1.4 "><p id="p194406755518"><a name="p194406755518"></a><a name="p194406755518"></a>否</p>
</td>
<td class="cellrowborder" valign="top" width="61.019999999999996%" headers="mcps1.2.6.1.5 "><p id="p1144027105511"><a name="p1144027105511"></a><a name="p1144027105511"></a>轴显示的刻度数量。</p>
<td class="cellrowborder" valign="top" width="55.1%" headers="mcps1.2.6.1.5 "><p id="p1144027105511"><a name="p1144027105511"></a><a name="p1144027105511"></a>轴显示的刻度数量。</p>
<div class="note" id="note18942121511202"><a name="note18942121511202"></a><a name="note18942121511202"></a><span class="notetitle"> 说明： </span><div class="notebody"><p id="p4709421681"><a name="p4709421681"></a><a name="p4709421681"></a>仅支持1~20，且具体显示的效果与如下计算值有关（图的宽度所占的像素/（max-min））。</p>
<p id="p234142016205"><a name="p234142016205"></a><a name="p234142016205"></a>在柱状图中，每组数据显示的柱子数量与刻度数量一致，且柱子显示在刻度处。</p>
</div></div>
......@@ -283,22 +283,22 @@
</td>
<td class="cellrowborder" valign="top" width="12.91%" headers="mcps1.2.6.1.2 "><p id="p1755910815552"><a name="p1755910815552"></a><a name="p1755910815552"></a>boolean</p>
</td>
<td class="cellrowborder" valign="top" width="8.870000000000001%" headers="mcps1.2.6.1.3 "><p id="p2559108195515"><a name="p2559108195515"></a><a name="p2559108195515"></a>false</p>
<td class="cellrowborder" valign="top" width="11.75%" headers="mcps1.2.6.1.3 "><p id="p2559108195515"><a name="p2559108195515"></a><a name="p2559108195515"></a>false</p>
</td>
<td class="cellrowborder" valign="top" width="7.02%" headers="mcps1.2.6.1.4 "><p id="p185597805514"><a name="p185597805514"></a><a name="p185597805514"></a>否</p>
<td class="cellrowborder" valign="top" width="10.059999999999999%" headers="mcps1.2.6.1.4 "><p id="p185597805514"><a name="p185597805514"></a><a name="p185597805514"></a>否</p>
</td>
<td class="cellrowborder" valign="top" width="61.019999999999996%" headers="mcps1.2.6.1.5 "><p id="p1655910815551"><a name="p1655910815551"></a><a name="p1655910815551"></a>是否显示轴。</p>
<td class="cellrowborder" valign="top" width="55.1%" headers="mcps1.2.6.1.5 "><p id="p1655910815551"><a name="p1655910815551"></a><a name="p1655910815551"></a>是否显示轴。</p>
</td>
</tr>
<tr id="row1382114065515"><td class="cellrowborder" valign="top" width="10.18%" headers="mcps1.2.6.1.1 "><p id="p188221209555"><a name="p188221209555"></a><a name="p188221209555"></a>color</p>
</td>
<td class="cellrowborder" valign="top" width="12.91%" headers="mcps1.2.6.1.2 "><p id="p1782214025517"><a name="p1782214025517"></a><a name="p1782214025517"></a>&lt;color&gt;</p>
</td>
<td class="cellrowborder" valign="top" width="8.870000000000001%" headers="mcps1.2.6.1.3 "><p id="p482220185512"><a name="p482220185512"></a><a name="p482220185512"></a>#c0c0c0</p>
<td class="cellrowborder" valign="top" width="11.75%" headers="mcps1.2.6.1.3 "><p id="p482220185512"><a name="p482220185512"></a><a name="p482220185512"></a>#c0c0c0</p>
</td>
<td class="cellrowborder" valign="top" width="7.02%" headers="mcps1.2.6.1.4 "><p id="p782214015553"><a name="p782214015553"></a><a name="p782214015553"></a>否</p>
<td class="cellrowborder" valign="top" width="10.059999999999999%" headers="mcps1.2.6.1.4 "><p id="p782214015553"><a name="p782214015553"></a><a name="p782214015553"></a>否</p>
</td>
<td class="cellrowborder" valign="top" width="61.019999999999996%" headers="mcps1.2.6.1.5 "><p id="p4822202556"><a name="p4822202556"></a><a name="p4822202556"></a>轴颜色。</p>
<td class="cellrowborder" valign="top" width="55.1%" headers="mcps1.2.6.1.5 "><p id="p4822202556"><a name="p4822202556"></a><a name="p4822202556"></a>轴颜色。</p>
</td>
</tr>
</tbody>
......@@ -937,17 +937,17 @@
除支持[通用方法](js-components-common-methods.md)外，还支持如下方法：
<a name="table7480052145013"></a>
<table><thead align="left"><tr id="row64801152175016"><th class="cellrowborder" valign="top" width="8.630863086308631%" id="mcps1.1.4.1.1"><p id="p184801352105010"><a name="p184801352105010"></a><a name="p184801352105010"></a>方法</p>
<table><thead align="left"><tr id="row64801152175016"><th class="cellrowborder" valign="top" width="13.881388138813882%" id="mcps1.1.4.1.1"><p id="p184801352105010"><a name="p184801352105010"></a><a name="p184801352105010"></a>方法</p>
</th>
<th class="cellrowborder" valign="top" width="58.035803580358035%" id="mcps1.1.4.1.2"><p id="p134801052175010"><a name="p134801052175010"></a><a name="p134801052175010"></a>参数</p>
<th class="cellrowborder" valign="top" width="52.78527852785279%" id="mcps1.1.4.1.2"><p id="p134801052175010"><a name="p134801052175010"></a><a name="p134801052175010"></a>参数</p>
</th>
<th class="cellrowborder" valign="top" width="33.33333333333333%" id="mcps1.1.4.1.3"><p id="p3480452115015"><a name="p3480452115015"></a><a name="p3480452115015"></a>描述</p>
</th>
</tr>
</thead>
<tbody><tr id="row1148112528509"><td class="cellrowborder" valign="top" width="8.630863086308631%" headers="mcps1.1.4.1.1 "><p id="p548115219507"><a name="p548115219507"></a><a name="p548115219507"></a>append</p>
<tbody><tr id="row1148112528509"><td class="cellrowborder" valign="top" width="13.881388138813882%" headers="mcps1.1.4.1.1 "><p id="p548115219507"><a name="p548115219507"></a><a name="p548115219507"></a>append</p>
</td>
<td class="cellrowborder" valign="top" width="58.035803580358035%" headers="mcps1.1.4.1.2 "><p id="p9481135295014"><a name="p9481135295014"></a><a name="p9481135295014"></a>{</p>
<td class="cellrowborder" valign="top" width="52.78527852785279%" headers="mcps1.1.4.1.2 "><p id="p9481135295014"><a name="p9481135295014"></a><a name="p9481135295014"></a>{</p>
<p id="p1348165210500"><a name="p1348165210500"></a><a name="p1348165210500"></a>serial: number, // 设置要更新的线形图数据下标</p>
<p id="p15481175285010"><a name="p15481175285010"></a><a name="p15481175285010"></a>data: Array&lt;number&gt;, // 设置新增的数据</p>
<p id="p948113523503"><a name="p948113523503"></a><a name="p948113523503"></a>}</p>
......
zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-image.md
浏览文件 @ 71d480cc
......@@ -202,7 +202,7 @@
```
<!-- xxx.hml -->
<div class="container">
<image src="common/hw_rights.JPG" style="width: 300px; height: 300px; object-fit:{{fit}}; object-position: 0px 0px; border: 1px solid red;">
<image src="common/images/hw_right.png" style="width: 300px; height: 300px; object-fit:{{fit}}; object-position: center center; border: 1px solid red;">
</image>
<select class="selects" onchange="change_fit">
<option for="{{fits}}" value="{{$item}}">{{$item}}</option>
......
zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-input.md
浏览文件 @ 71d480cc
......@@ -573,7 +573,6 @@
<input type="radio" checked='true' name="radioSample" value="radio1" onchange="onRadioChange('radio1')"></input>
<input type="radio" checked='false' name="radioSample" value="radio2" onchange="onRadioChange('radio2')"></input>
<input type="radio" checked='false' name="radioSample" value="radio3" onchange="onRadioChange('radio3')"></input>
</div>
```
```
......
zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-piece.md
浏览文件 @ 71d480cc
......@@ -100,12 +100,22 @@
```
<!-- xxx.hml-->
<div>
<piece if="{{first}}" content="Huawei"></piece>
<piece if="{{second}}" content="Huawei" closable="true" onclose="closeSecond"></piece>
<div class="container" >
<piece if="{{first}}" content="example"></piece>
<piece if="{{second}}" content="example" closable="true" onclose="closeSecond"></piece>
</div>
```
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
}
```
```
// xxx.js
export default {
......@@ -119,5 +129,5 @@ export default {
}
```
![](figures/SVID_20210301_193525_1.gif)
![](figures/11-1.gif)
zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-qrcode.md
浏览文件 @ 71d480cc
......@@ -113,6 +113,71 @@
## 示例<a name="section81001951259"></a>
```
<qrcode value="https://huawei.com"></qrcode>
<!-- xxx.hml -->
<div class="container">
<qrcode value="{{qr_value}}" type="{{qr_type}}"
style="color: {{qr_col}};background-color: {{qr_bcol}};width: {{qr_size}};height: {{qr_size}};margin-bottom: 70px;"></qrcode>
<text class="txt">Type</text>
<switch showtext="true" checked="true" texton="rect" textoff="circle" onchange="settype"></switch>
<text class="txt">Color</text>
<select onchange="setcol">
<option for="{{col_list}}" value="{{$item}}">{{$item}}</option>
</select>
<text class="txt">Background Color</text>
<select onchange="setbcol">
<option for="{{bcol_list}}" value="{{$item}}">{{$item}}</option>
</select>
</div>
```
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
}
.txt {
margin: 30px;
color: orangered;
}
select{
margin-top: 40px;
margin-bottom: 40px;
}
```
```
/* index.js */
export default {
data: {
qr_type: 'rect',
qr_size: '300px',
qr_col: '#87ceeb',
col_list: ['#87ceeb','#fa8072','#da70d6','#80ff00ff','#00ff00ff'],
qr_bcol: '#f0ffff',
bcol_list: ['#f0ffff','#ffffe0','#d8bfd8']
},
settype(e) {
if (e.checked) {
this.qr_type = 'rect'
} else {
this.qr_type = 'circle'
}
},
setvalue(e) {
this.qr_value = e.newValue
},
setcol(e) {
this.qr_col = e.newValue
},
setbcol(e) {
this.qr_bcol = e.newValue
}
}
```
![](figures/12.gif)
zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-canvas.md
浏览文件 @ 71d480cc
......@@ -26,38 +26,142 @@
除支持[通用方法](js-components-common-methods.md)外，还支持如下方法：
<a name="td0f869ce272e4d90b1c7df558ad7635e"></a>
<table><thead align="left"><tr id="rf11e90428c78465b9e3a0c3ec2222a3c"><th class="cellrowborder" valign="top" width="10.81%" id="mcps1.1.4.1.1"><p id="a11b4cb4edcf14b5584841b089cbea895"><a name="a11b4cb4edcf14b5584841b089cbea895"></a><a name="a11b4cb4edcf14b5584841b089cbea895"></a>名称</p>
</th>
<th class="cellrowborder" valign="top" width="26.19%" id="mcps1.1.4.1.2"><p id="ac56fe081db8a4ddca537c39d9abfcd33"><a name="ac56fe081db8a4ddca537c39d9abfcd33"></a><a name="ac56fe081db8a4ddca537c39d9abfcd33"></a>参数</p>
</th>
<th class="cellrowborder" valign="top" width="63%" id="mcps1.1.4.1.3"><p id="a05cdd2c741a54fe3a44575a5b2384be3"><a name="a05cdd2c741a54fe3a44575a5b2384be3"></a><a name="a05cdd2c741a54fe3a44575a5b2384be3"></a>描述</p>
</th>
</tr>
</thead>
<tbody><tr id="r960677f8f5e64d7f9b33b8a0ae0c824f"><td class="cellrowborder" valign="top" width="10.81%" headers="mcps1.1.4.1.1 "><p id="p931916913120"><a name="p931916913120"></a><a name="p931916913120"></a>getContext</p>
</td>
<td class="cellrowborder" valign="top" width="26.19%" headers="mcps1.1.4.1.2 "><p id="p685785963319"><a name="p685785963319"></a><a name="p685785963319"></a>getContext ( type: '2d', attributes<sup id="sup1114274719338"><a name="sup1114274719338"></a><a name="sup1114274719338"></a>6+</sup>: { antialias: boolean } ) =&gt; CanvasRendering2dContext</p>
</td>
<td class="cellrowborder" valign="top" width="63%" headers="mcps1.1.4.1.3 "><p id="p176180219405"><a name="p176180219405"></a><a name="p176180219405"></a>获取canvas绘图上下文。调用方法如下两种<sup id="sup520217171365"><a name="sup520217171365"></a><a name="sup520217171365"></a><span>6+</span></sup>：</p>
<p id="p1161802114405"><a name="p1161802114405"></a><a name="p1161802114405"></a>var ctx = canvas.getContext(contextType);</p>
<p id="p1161882115404"><a name="p1161882115404"></a><a name="p1161882115404"></a>var ctx = canvas.getContext(contextType, contextAttributes);</p>
<p id="p1361802194016"><a name="p1361802194016"></a><a name="p1361802194016"></a>其中contextType为必填项，当前支持"2d"，contextAttributes为可选参数，当前仅支持配置是否开启抗锯齿功能，默认为关闭。</p>
<p id="p15975612161011"><a name="p15975612161011"></a><a name="p15975612161011"></a>contextType对应的上下文对象如下：</p>
<p id="p1260014407342"><a name="p1260014407342"></a><a name="p1260014407342"></a>"2d"：返回值为2D绘制对象，该对象提供具体的2D绘制操作。详见<a href="js-components-canvas-canvasrenderingcontext2d.md">CanvasRenderingContext2D对象</a>章节。</p>
<p id="p14183154363412"><a name="p14183154363412"></a><a name="p14183154363412"></a>不支持在onInit和onReady中进行调用。</p>
</td>
</tr>
<tr id="row13364759185512"><td class="cellrowborder" valign="top" width="10.81%" headers="mcps1.1.4.1.1 "><p id="p5364145915552"><a name="p5364145915552"></a><a name="p5364145915552"></a>toDataURL<sup id="sup822112587185"><a name="sup822112587185"></a><a name="sup822112587185"></a>6+</sup></p>
</td>
<td class="cellrowborder" valign="top" width="26.19%" headers="mcps1.1.4.1.2 "><p id="p12364115935515"><a name="p12364115935515"></a><a name="p12364115935515"></a>string type, number encoderOptions</p>
</td>
<td class="cellrowborder" valign="top" width="63%" headers="mcps1.1.4.1.3 "><p id="p1336455955512"><a name="p1336455955512"></a><a name="p1336455955512"></a>生成一个包含图片展示的URL。</p>
<a name="ul155726311612"></a><a name="ul155726311612"></a><ul id="ul155726311612"><li>type：可选参数，用于指定图像格式，默认格式为image/png。</li><li>encoderOptions：在指定图片格式为image/jpeg或image/webp的情况下，可以从0到1的区间内选择图片的质量。如果超出取值范围，将会使用默认值0.92。</li></ul>
</td>
</tr>
</tbody>
</table>
### getContext\(type: '2d', options?: ContextAttrOptions\)<a name="section18710131144813"></a>
getContext \(type: '2d', options?: ContextAttrOptions\): CanvasRendering2dContext
获取canvas绘图上下文。不支持在onInit和onReady中进行调用。
- 参数
<a name="table3592161817496"></a>
<table><thead align="left"><tr id="row19592141864916"><th class="cellrowborder" valign="top" width="21.04%" id="mcps1.1.5.1.1"><p id="p229575610288"><a name="p229575610288"></a><a name="p229575610288"></a>参数名</p>
</th>
<th class="cellrowborder" valign="top" width="15.260000000000002%" id="mcps1.1.5.1.2"><p id="p929585682819"><a name="p929585682819"></a><a name="p929585682819"></a>参数类型</p>
</th>
<th class="cellrowborder" valign="top" width="7.5200000000000005%" id="mcps1.1.5.1.3"><p id="p1184145643311"><a name="p1184145643311"></a><a name="p1184145643311"></a>必填</p>
</th>
<th class="cellrowborder" valign="top" width="56.18%" id="mcps1.1.5.1.4"><p id="p1929645618282"><a name="p1929645618282"></a><a name="p1929645618282"></a>描述</p>
</th>
</tr>
</thead>
<tbody><tr id="row1559261834915"><td class="cellrowborder" valign="top" width="21.04%" headers="mcps1.1.5.1.1 "><p id="p115927183493"><a name="p115927183493"></a><a name="p115927183493"></a>type</p>
</td>
<td class="cellrowborder" valign="top" width="15.260000000000002%" headers="mcps1.1.5.1.2 "><p id="p95921918114914"><a name="p95921918114914"></a><a name="p95921918114914"></a>string</p>
</td>
<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.5.1.3 "><p id="p1084205619334"><a name="p1084205619334"></a><a name="p1084205619334"></a>是</p>
</td>
<td class="cellrowborder" valign="top" width="56.18%" headers="mcps1.1.5.1.4 "><p id="p94820268342"><a name="p94820268342"></a><a name="p94820268342"></a>可选值为'2d'，返回值为2D绘制对象，该对象提供具体的2D绘制操作。</p>
</td>
</tr>
<tr id="row195921118184916"><td class="cellrowborder" valign="top" width="21.04%" headers="mcps1.1.5.1.1 "><p id="p45928181498"><a name="p45928181498"></a><a name="p45928181498"></a>options<sup id="sup710512322033"><a name="sup710512322033"></a><a name="sup710512322033"></a>6+</sup></p>
</td>
<td class="cellrowborder" valign="top" width="15.260000000000002%" headers="mcps1.1.5.1.2 "><p id="p10111319172612"><a name="p10111319172612"></a><a name="p10111319172612"></a><a href="#table87141136171717">ContextAttrOptions</a></p>
</td>
<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.5.1.3 "><p id="p184115663319"><a name="p184115663319"></a><a name="p184115663319"></a>否</p>
</td>
<td class="cellrowborder" valign="top" width="56.18%" headers="mcps1.1.5.1.4 "><p id="p6592518124911"><a name="p6592518124911"></a><a name="p6592518124911"></a>具体表现为当前仅支持配置是否开启抗锯齿功能，默认为关闭。</p>
</td>
</tr>
</tbody>
</table>
**表 1** ContextAttrOptions
<a name="table87141136171717"></a>
<table><thead align="left"><tr id="row13714163615179"><th class="cellrowborder" valign="top" width="33.33333333333333%" id="mcps1.2.4.1.1"><p id="p1315935981716"><a name="p1315935981716"></a><a name="p1315935981716"></a>参数名</p>
</th>
<th class="cellrowborder" valign="top" width="33.33333333333333%" id="mcps1.2.4.1.2"><p id="p21591759121715"><a name="p21591759121715"></a><a name="p21591759121715"></a>类型</p>
</th>
<th class="cellrowborder" valign="top" width="33.33333333333333%" id="mcps1.2.4.1.3"><p id="p115945931710"><a name="p115945931710"></a><a name="p115945931710"></a>说明</p>
</th>
</tr>
</thead>
<tbody><tr id="row17151636111717"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.1 "><p id="p102771695180"><a name="p102771695180"></a><a name="p102771695180"></a>antialias</p>
</td>
<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.2 "><p id="p1227710916188"><a name="p1227710916188"></a><a name="p1227710916188"></a>boolean</p>
</td>
<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.3 "><p id="p5277099182"><a name="p5277099182"></a><a name="p5277099182"></a>是否开启抗锯齿功能，默认为false。</p>
</td>
</tr>
</tbody>
</table>
- 返回值
<a name="table0782932202818"></a>
<table><thead align="left"><tr id="row3782832172814"><th class="cellrowborder" valign="top" width="19.77%" id="mcps1.1.3.1.1"><p id="p1278314323284"><a name="p1278314323284"></a><a name="p1278314323284"></a>类型</p>
</th>
<th class="cellrowborder" valign="top" width="80.23%" id="mcps1.1.3.1.2"><p id="p17783153216281"><a name="p17783153216281"></a><a name="p17783153216281"></a>说明</p>
</th>
</tr>
</thead>
<tbody><tr id="row278317321285"><td class="cellrowborder" valign="top" width="19.77%" headers="mcps1.1.3.1.1 "><p id="p368814141577"><a name="p368814141577"></a><a name="p368814141577"></a><a href="js-components-canvas-canvasrenderingcontext2d.md">CanvasRenderingContext2D</a></p>
</td>
<td class="cellrowborder" valign="top" width="80.23%" headers="mcps1.1.3.1.2 "><p id="p1537310444489"><a name="p1537310444489"></a><a name="p1537310444489"></a>用于在画布组件上绘制矩形、文本<span id="ph12120164516264"><a name="ph12120164516264"></a><a name="ph12120164516264"></a>、图片等</span>。</p>
</td>
</tr>
</tbody>
</table>
### toDataURL<sup>6+</sup><a name="section16338154813483"></a>
toDataURL\(type?: string, quality?: number\): string
生成一个包含图片展示的URL。
- 参数
<a name="table1972913125017"></a>
<table><thead align="left"><tr id="row972933145015"><th class="cellrowborder" valign="top" width="21.04%" id="mcps1.1.5.1.1"><p id="p87291315508"><a name="p87291315508"></a><a name="p87291315508"></a>参数名</p>
</th>
<th class="cellrowborder" valign="top" width="15.260000000000002%" id="mcps1.1.5.1.2"><p id="p1072919316505"><a name="p1072919316505"></a><a name="p1072919316505"></a>参数类型</p>
</th>
<th class="cellrowborder" valign="top" width="7.5200000000000005%" id="mcps1.1.5.1.3"><p id="p11119820134420"><a name="p11119820134420"></a><a name="p11119820134420"></a>必填</p>
</th>
<th class="cellrowborder" valign="top" width="56.18%" id="mcps1.1.5.1.4"><p id="p872916310508"><a name="p872916310508"></a><a name="p872916310508"></a>描述</p>
</th>
</tr>
</thead>
<tbody><tr id="row167295395016"><td class="cellrowborder" valign="top" width="21.04%" headers="mcps1.1.5.1.1 "><p id="p0729103105015"><a name="p0729103105015"></a><a name="p0729103105015"></a>type</p>
</td>
<td class="cellrowborder" valign="top" width="15.260000000000002%" headers="mcps1.1.5.1.2 "><p id="p1872993205018"><a name="p1872993205018"></a><a name="p1872993205018"></a>string</p>
</td>
<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.5.1.3 "><p id="p1511910203441"><a name="p1511910203441"></a><a name="p1511910203441"></a>否</p>
</td>
<td class="cellrowborder" valign="top" width="56.18%" headers="mcps1.1.5.1.4 "><p id="p209224525110"><a name="p209224525110"></a><a name="p209224525110"></a>可选参数，用于指定图像格式，默认格式为image/png。</p>
</td>
</tr>
<tr id="row77303345020"><td class="cellrowborder" valign="top" width="21.04%" headers="mcps1.1.5.1.1 "><p id="p3304419154314"><a name="p3304419154314"></a><a name="p3304419154314"></a>quality</p>
</td>
<td class="cellrowborder" valign="top" width="15.260000000000002%" headers="mcps1.1.5.1.2 "><p id="p591623145012"><a name="p591623145012"></a><a name="p591623145012"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.5.1.3 "><p id="p71196204446"><a name="p71196204446"></a><a name="p71196204446"></a>否</p>
</td>
<td class="cellrowborder" valign="top" width="56.18%" headers="mcps1.1.5.1.4 "><p id="p154271418165118"><a name="p154271418165118"></a><a name="p154271418165118"></a>在指定图片格式为image/jpeg或image/webp的情况下，可以从0到1的区间内选择图片的质量。如果超出取值范围，将会使用默认值0.92。</p>
</td>
</tr>
</tbody>
</table>
- 返回值
<a name="table840318881017"></a>
<table><thead align="left"><tr id="row4403128141019"><th class="cellrowborder" valign="top" width="19.77%" id="mcps1.1.3.1.1"><p id="p1440311815106"><a name="p1440311815106"></a><a name="p1440311815106"></a>类型</p>
</th>
<th class="cellrowborder" valign="top" width="80.23%" id="mcps1.1.3.1.2"><p id="p18403185106"><a name="p18403185106"></a><a name="p18403185106"></a>说明</p>
</th>
</tr>
</thead>
<tbody><tr id="row640378101013"><td class="cellrowborder" valign="top" width="19.77%" headers="mcps1.1.3.1.1 "><p id="p13403983101"><a name="p13403983101"></a><a name="p13403983101"></a>string</p>
</td>
<td class="cellrowborder" valign="top" width="80.23%" headers="mcps1.1.3.1.2 "><p id="p1248949111020"><a name="p1248949111020"></a><a name="p1248949111020"></a>图像的URL地址。</p>
</td>
</tr>
</tbody>
</table>
## 示例<a name="section42931433142318"></a>
......
zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-canvasrenderingcontext2d.md
浏览文件 @ 71d480cc
......@@ -513,7 +513,7 @@ ctx.fillRect(30, 30, 100, 100);
```
var img = new Image();
img.src = 'common/image/huawei.jpg';
img.src = 'common/image/example.jpg';
img.onload = function() {
ctx.imageSmoothingEnabled = false;
ctx.drawImage(img, 0, 0, 400, 200);
......
zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-image.md
浏览文件 @ 71d480cc
......@@ -80,7 +80,7 @@
```
var ctx = this.$element('drawImage').getContext('2d');
var img = new Image();
img.src = 'common/images/huawei.jpg';
img.src = 'common/images/example.jpg';
img.onload = function() {
console.log('Image load success');
ctx.drawImage(img, 0, 0, 360, 250);
......@@ -90,5 +90,5 @@ img.onerror = function() {
};
```
![](figures/zh-cn_image_0000001198530395.png)
![](figures/1-2.png)
zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-offscreencanvas.md
浏览文件 @ 71d480cc
......@@ -35,43 +35,145 @@
## 方法<a name="section47669296127"></a>
<a name="td0f869ce272e4d90b1c7df558ad7635e"></a>
<table><thead align="left"><tr id="rf11e90428c78465b9e3a0c3ec2222a3c"><th class="cellrowborder" valign="top" width="11.68%" id="mcps1.1.4.1.1"><p id="a11b4cb4edcf14b5584841b089cbea895"><a name="a11b4cb4edcf14b5584841b089cbea895"></a><a name="a11b4cb4edcf14b5584841b089cbea895"></a>名称</p>
</th>
<th class="cellrowborder" valign="top" width="25.319999999999997%" id="mcps1.1.4.1.2"><p id="ac56fe081db8a4ddca537c39d9abfcd33"><a name="ac56fe081db8a4ddca537c39d9abfcd33"></a><a name="ac56fe081db8a4ddca537c39d9abfcd33"></a>参数</p>
</th>
<th class="cellrowborder" valign="top" width="63%" id="mcps1.1.4.1.3"><p id="a05cdd2c741a54fe3a44575a5b2384be3"><a name="a05cdd2c741a54fe3a44575a5b2384be3"></a><a name="a05cdd2c741a54fe3a44575a5b2384be3"></a>描述</p>
</th>
</tr>
</thead>
<tbody><tr id="r960677f8f5e64d7f9b33b8a0ae0c824f"><td class="cellrowborder" valign="top" width="11.68%" headers="mcps1.1.4.1.1 "><p id="p931916913120"><a name="p931916913120"></a><a name="p931916913120"></a>getContext</p>
</td>
<td class="cellrowborder" valign="top" width="25.319999999999997%" headers="mcps1.1.4.1.2 "><p id="p123073254554"><a name="p123073254554"></a><a name="p123073254554"></a>contextId: "2d", options?: CanvasRenderingContext2DSettings</p>
</td>
<td class="cellrowborder" valign="top" width="63%" headers="mcps1.1.4.1.3 "><p id="p176180219405"><a name="p176180219405"></a><a name="p176180219405"></a>调用方法如下两种：</p>
<p id="p1161802114405"><a name="p1161802114405"></a><a name="p1161802114405"></a>var ctx = canvas.getContext(contextId);</p>
<p id="p1161882115404"><a name="p1161882115404"></a><a name="p1161882115404"></a>var ctx = canvas.getContext(contextId, options);</p>
<p id="p1361802194016"><a name="p1361802194016"></a><a name="p1361802194016"></a>其中contextId为必填项，当前仅支持"2d"，options为可选项，暂时不支持。</p>
<p id="p1260014407342"><a name="p1260014407342"></a><a name="p1260014407342"></a>获取offscreen canvas绘图上下文，参数仅支持“2d”，返回值为2D绘制对象，该对象提供具体的2D绘制操作。详见<a href="js-offscreencanvasrenderingcontext2d.md">OffscreenCanvasRenderingContext2D</a>对象章节。</p>
</td>
</tr>
<tr id="row13364759185512"><td class="cellrowborder" valign="top" width="11.68%" headers="mcps1.1.4.1.1 "><p id="p93374133418"><a name="p93374133418"></a><a name="p93374133418"></a>toDataURL</p>
</td>
<td class="cellrowborder" valign="top" width="25.319999999999997%" headers="mcps1.1.4.1.2 "><p id="p74131655155410"><a name="p74131655155410"></a><a name="p74131655155410"></a>type?: string, quality?: number</p>
</td>
<td class="cellrowborder" valign="top" width="63%" headers="mcps1.1.4.1.3 "><p id="p1336455955512"><a name="p1336455955512"></a><a name="p1336455955512"></a>生成一个包含图片展示的URL。</p>
<a name="ul155726311612"></a><a name="ul155726311612"></a><ul id="ul155726311612"><li>type：可选参数，用于指定图像格式，默认格式为image/png。</li><li>quality：在指定图片格式为image/jpeg或image/webp的情况下，可以从0到1的区间内选择图片的质量。如果超出取值范围，将会使用默认值0.92。</li></ul>
</td>
</tr>
<tr id="row1350184614429"><td class="cellrowborder" valign="top" width="11.68%" headers="mcps1.1.4.1.1 "><p id="p11501134614422"><a name="p11501134614422"></a><a name="p11501134614422"></a>transferToImageBitmap</p>
</td>
<td class="cellrowborder" valign="top" width="25.319999999999997%" headers="mcps1.1.4.1.2 "><p id="p135011946194215"><a name="p135011946194215"></a><a name="p135011946194215"></a>无</p>
</td>
<td class="cellrowborder" valign="top" width="63%" headers="mcps1.1.4.1.3 "><p id="p20502164624212"><a name="p20502164624212"></a><a name="p20502164624212"></a>从OffscreenCanvas最近渲染的图像创建一个 ImageBitmap 对象</p>
</td>
</tr>
</tbody>
</table>
### getContext<a name="section18710131144813"></a>
getContext\(type: string, options?: CanvasRenderingContext2DSettings\): OffscreenCanvasRenderingContext2D
获取offscreen canvas绘图上下文，返回值为2D绘制对象。
- 参数
<a name="table3592161817496"></a>
<table><thead align="left"><tr id="row19592141864916"><th class="cellrowborder" valign="top" width="14.63%" id="mcps1.1.5.1.1"><p id="p229575610288"><a name="p229575610288"></a><a name="p229575610288"></a>参数名</p>
</th>
<th class="cellrowborder" valign="top" width="21.67%" id="mcps1.1.5.1.2"><p id="p929585682819"><a name="p929585682819"></a><a name="p929585682819"></a>参数类型</p>
</th>
<th class="cellrowborder" valign="top" width="7.5200000000000005%" id="mcps1.1.5.1.3"><p id="p11119820134420"><a name="p11119820134420"></a><a name="p11119820134420"></a>必填</p>
</th>
<th class="cellrowborder" valign="top" width="56.18%" id="mcps1.1.5.1.4"><p id="p1929645618282"><a name="p1929645618282"></a><a name="p1929645618282"></a>描述</p>
</th>
</tr>
</thead>
<tbody><tr id="row1559261834915"><td class="cellrowborder" valign="top" width="14.63%" headers="mcps1.1.5.1.1 "><p id="p4300201718586"><a name="p4300201718586"></a><a name="p4300201718586"></a>contextId</p>
</td>
<td class="cellrowborder" valign="top" width="21.67%" headers="mcps1.1.5.1.2 "><p id="p95921918114914"><a name="p95921918114914"></a><a name="p95921918114914"></a>string</p>
</td>
<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.5.1.3 "><p id="p1511910203441"><a name="p1511910203441"></a><a name="p1511910203441"></a>是</p>
</td>
<td class="cellrowborder" valign="top" width="56.18%" headers="mcps1.1.5.1.4 "><p id="p5592518104911"><a name="p5592518104911"></a><a name="p5592518104911"></a>仅支持"2d"。</p>
</td>
</tr>
<tr id="row195921118184916"><td class="cellrowborder" valign="top" width="14.63%" headers="mcps1.1.5.1.1 "><p id="p45928181498"><a name="p45928181498"></a><a name="p45928181498"></a>options</p>
</td>
<td class="cellrowborder" valign="top" width="21.67%" headers="mcps1.1.5.1.2 "><p id="p311133955712"><a name="p311133955712"></a><a name="p311133955712"></a><a href="js-offscreencanvasrenderingcontext2d.md">CanvasRenderingContext2DSettings</a></p>
</td>
<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.5.1.3 "><p id="p71196204446"><a name="p71196204446"></a><a name="p71196204446"></a>否</p>
</td>
<td class="cellrowborder" valign="top" width="56.18%" headers="mcps1.1.5.1.4 "><p id="p4507539135910"><a name="p4507539135910"></a><a name="p4507539135910"></a>用于在离屏画布上进行绘制矩形、文本<span id="ph9658615131215"><a name="ph9658615131215"></a><a name="ph9658615131215"></a>、图片等</span>。</p>
</td>
</tr>
</tbody>
</table>
- 返回值
<a name="table0782932202818"></a>
<table><thead align="left"><tr id="row3782832172814"><th class="cellrowborder" valign="top" width="30.130000000000003%" id="mcps1.1.3.1.1"><p id="p1278314323284"><a name="p1278314323284"></a><a name="p1278314323284"></a>类型</p>
</th>
<th class="cellrowborder" valign="top" width="69.87%" id="mcps1.1.3.1.2"><p id="p17783153216281"><a name="p17783153216281"></a><a name="p17783153216281"></a>说明</p>
</th>
</tr>
</thead>
<tbody><tr id="row278317321285"><td class="cellrowborder" valign="top" width="30.130000000000003%" headers="mcps1.1.3.1.1 "><p id="p183226014014"><a name="p183226014014"></a><a name="p183226014014"></a><a href="js-offscreencanvasrenderingcontext2d.md">OffscreenCanvasRenderingContext2D</a></p>
</td>
<td class="cellrowborder" valign="top" width="69.87%" headers="mcps1.1.3.1.2 "><p id="p122361757181118"><a name="p122361757181118"></a><a name="p122361757181118"></a>用于在画布组件上绘制矩形、文本<span id="ph12120164516264"><a name="ph12120164516264"></a><a name="ph12120164516264"></a>、图片等</span>。</p>
</td>
</tr>
</tbody>
</table>
### toDataURL<a name="section16338154813483"></a>
toDataURL\(type?: string, quality?:number\):
生成一个包含图片展示的URL。
- 参数
<a name="table1972913125017"></a>
<table><thead align="left"><tr id="row972933145015"><th class="cellrowborder" valign="top" width="21.04%" id="mcps1.1.5.1.1"><p id="p87291315508"><a name="p87291315508"></a><a name="p87291315508"></a>参数名</p>
</th>
<th class="cellrowborder" valign="top" width="15.260000000000002%" id="mcps1.1.5.1.2"><p id="p1072919316505"><a name="p1072919316505"></a><a name="p1072919316505"></a>参数类型</p>
</th>
<th class="cellrowborder" valign="top" width="7.5200000000000005%" id="mcps1.1.5.1.3"><p id="p13152856144418"><a name="p13152856144418"></a><a name="p13152856144418"></a>必填</p>
</th>
<th class="cellrowborder" valign="top" width="56.18%" id="mcps1.1.5.1.4"><p id="p872916310508"><a name="p872916310508"></a><a name="p872916310508"></a>描述</p>
</th>
</tr>
</thead>
<tbody><tr id="row167295395016"><td class="cellrowborder" valign="top" width="21.04%" headers="mcps1.1.5.1.1 "><p id="p0729103105015"><a name="p0729103105015"></a><a name="p0729103105015"></a>type</p>
</td>
<td class="cellrowborder" valign="top" width="15.260000000000002%" headers="mcps1.1.5.1.2 "><p id="p1872993205018"><a name="p1872993205018"></a><a name="p1872993205018"></a>string</p>
</td>
<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.5.1.3 "><p id="p61520569444"><a name="p61520569444"></a><a name="p61520569444"></a>否</p>
</td>
<td class="cellrowborder" valign="top" width="56.18%" headers="mcps1.1.5.1.4 "><p id="p209224525110"><a name="p209224525110"></a><a name="p209224525110"></a>可选参数，用于指定图像格式，默认格式为image/png。</p>
</td>
</tr>
<tr id="row77303345020"><td class="cellrowborder" valign="top" width="21.04%" headers="mcps1.1.5.1.1 "><p id="p15925558438"><a name="p15925558438"></a><a name="p15925558438"></a>quality</p>
</td>
<td class="cellrowborder" valign="top" width="15.260000000000002%" headers="mcps1.1.5.1.2 "><p id="p591623145012"><a name="p591623145012"></a><a name="p591623145012"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.5.1.3 "><p id="p201520564442"><a name="p201520564442"></a><a name="p201520564442"></a>否</p>
</td>
<td class="cellrowborder" valign="top" width="56.18%" headers="mcps1.1.5.1.4 "><p id="p154271418165118"><a name="p154271418165118"></a><a name="p154271418165118"></a>在指定图片格式为image/jpeg或image/webp的情况下，可以从0到1的区间内选择图片的质量。如果超出取值范围，将会使用默认值0.92。</p>
</td>
</tr>
</tbody>
</table>
- 返回值
<a name="table840318881017"></a>
<table><thead align="left"><tr id="row4403128141019"><th class="cellrowborder" valign="top" width="19.77%" id="mcps1.1.3.1.1"><p id="p1440311815106"><a name="p1440311815106"></a><a name="p1440311815106"></a>类型</p>
</th>
<th class="cellrowborder" valign="top" width="80.23%" id="mcps1.1.3.1.2"><p id="p18403185106"><a name="p18403185106"></a><a name="p18403185106"></a>说明</p>
</th>
</tr>
</thead>
<tbody><tr id="row640378101013"><td class="cellrowborder" valign="top" width="19.77%" headers="mcps1.1.3.1.1 "><p id="p13403983101"><a name="p13403983101"></a><a name="p13403983101"></a>string</p>
</td>
<td class="cellrowborder" valign="top" width="80.23%" headers="mcps1.1.3.1.2 "><p id="p1248949111020"><a name="p1248949111020"></a><a name="p1248949111020"></a>图像的URL地址。</p>
</td>
</tr>
</tbody>
</table>
### transferToImageBitmap<a name="section1255985012014"></a>
transferToImageBitmap\(\): ImageBitmap
在离屏画布最近渲染的图像上创建一个ImageBitmap对象。
- 返回值
<a name="table1355965013016"></a>
<table><thead align="left"><tr id="row1955916501207"><th class="cellrowborder" valign="top" width="21.36%" id="mcps1.1.3.1.1"><p id="p455913505014"><a name="p455913505014"></a><a name="p455913505014"></a>类型</p>
</th>
<th class="cellrowborder" valign="top" width="78.64%" id="mcps1.1.3.1.2"><p id="p155591504010"><a name="p155591504010"></a><a name="p155591504010"></a>说明</p>
</th>
</tr>
</thead>
<tbody><tr id="row205593500015"><td class="cellrowborder" valign="top" width="21.36%" headers="mcps1.1.3.1.1 "><p id="p2559155012012"><a name="p2559155012012"></a><a name="p2559155012012"></a><a href="js-components-canvas-imagebitmap.md">ImageBitmap</a></p>
</td>
<td class="cellrowborder" valign="top" width="78.64%" headers="mcps1.1.3.1.2 "><p id="p455913505011"><a name="p455913505011"></a><a name="p455913505011"></a>存储离屏画布上渲染的像素数据。</p>
</td>
</tr>
</tbody>
</table>
## 示例<a name="section13457717134912"></a>
......
zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-attributes.md
浏览文件 @ 71d480cc
......@@ -83,7 +83,21 @@
<td class="cellrowborder" valign="top" width="51.754824517548236%" headers="mcps1.1.6.1.5 "><p id="a8e6a00e044b44797a3db0ea017c82cd5"><a name="a8e6a00e044b44797a3db0ea017c82cd5"></a><a name="a8e6a00e044b44797a3db0ea017c82cd5"></a>当前组件是否可以获取焦点。 当focusable设置为true时，组件可以响应焦点事件和按键事件。当组件额外设置了按键事件或者点击事件时，框架会设置该属性为true。</p>
</td>
</tr>
<tr id="rc6c4586e5aa8487ba77c1e8df90c121d"><td class="cellrowborder" valign="top" width="19.598040195980403%" headers="mcps1.1.6.1.1 "><p id="a751c9d46a62348ec902c7fdf97468b9d"><a name="a751c9d46a62348ec902c7fdf97468b9d"></a><a name="a751c9d46a62348ec902c7fdf97468b9d"></a>data-*<sup id="sup186963594254"><a name="sup186963594254"></a><a name="sup186963594254"></a>6+</sup></p>
<tr id="row17245762598"><td class="cellrowborder" valign="top" width="19.598040195980403%" headers="mcps1.1.6.1.1 "><p id="p4643111525911"><a name="p4643111525911"></a><a name="p4643111525911"></a>data</p>
</td>
<td class="cellrowborder" valign="top" width="11.178882111788822%" headers="mcps1.1.6.1.2 "><p id="p586671911599"><a name="p586671911599"></a><a name="p586671911599"></a>string</p>
</td>
<td class="cellrowborder" valign="top" width="9.899010098990102%" headers="mcps1.1.6.1.3 "><p id="p18866121905913"><a name="p18866121905913"></a><a name="p18866121905913"></a>-</p>
</td>
<td class="cellrowborder" valign="top" width="7.56924307569243%" headers="mcps1.1.6.1.4 "><p id="p168661719165920"><a name="p168661719165920"></a><a name="p168661719165920"></a>否</p>
</td>
<td class="cellrowborder" valign="top" width="51.754824517548236%" headers="mcps1.1.6.1.5 "><p id="p84627247592"><a name="p84627247592"></a><a name="p84627247592"></a>给当前组件设置data属性，进行相应的数据存储和读取。JS文件中：</p>
<a name="ul711919169212"></a><a name="ul711919169212"></a><ul id="ul711919169212"><li>在事件回调中使用 e.target.attr.data 读取数据，e为事件回调函数入参。</li><li>使用$element或者$refs获取DOM元素后，通过attr.data 进行访问。</li></ul>
<div class="note" id="note259213045911"><a name="note259213045911"></a><a name="note259213045911"></a><span class="notetitle"> 说明： </span><div class="notebody"><p id="p359213019595"><a name="p359213019595"></a><a name="p359213019595"></a>从API Version 6 开始，建议使用data-*。</p>
</div></div>
</td>
</tr>
<tr id="rc6c4586e5aa8487ba77c1e8df90c121d"><td class="cellrowborder" valign="top" width="19.598040195980403%" headers="mcps1.1.6.1.1 "><p id="p2077661832920"><a name="p2077661832920"></a><a name="p2077661832920"></a>data-*<sup id="sup186963594254"><a name="sup186963594254"></a><a name="sup186963594254"></a>6+</sup></p>
</td>
<td class="cellrowborder" valign="top" width="11.178882111788822%" headers="mcps1.1.6.1.2 "><p id="a8e6d1bb4d0bc423fb8466ee3acd1882f"><a name="a8e6d1bb4d0bc423fb8466ee3acd1882f"></a><a name="a8e6d1bb4d0bc423fb8466ee3acd1882f"></a>string</p>
</td>
......
zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-events.md
浏览文件 @ 71d480cc
......@@ -388,7 +388,7 @@
</tbody>
</table>
**表 6** DragEvent对象属性列表\(继承BaseEvent\)<sup>7+</sup>\(Rich\)
**表 6** DragEvent对象属性列表\(继承BaseEvent\)<sup>7+</sup>
<a name="table95551461358"></a>
<table><thead align="left"><tr id="row0556746250"><th class="cellrowborder" valign="top" width="17%" id="mcps1.2.4.1.1"><p id="p1555617466516"><a name="p1555617466516"></a><a name="p1555617466516"></a>属性</p>
......
zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-badge.md
浏览文件 @ 71d480cc
......@@ -193,10 +193,10 @@
<!-- xxx.hml -->
<div class="container">
<badge class="badge" config="{{badgeconfig}}" visible="true" count="100" maxcount="99">
<text class="text1">huawei</text>
<text class="text1">example</text>
</badge>
<badge class="badge" visible="true" count="0">
<text class="text2">huawei</text>
<text class="text2">example</text>
</badge>
</div>
```
......@@ -234,5 +234,5 @@ export default {
}
```
![](figures/zh-cn_image_0000001150368628.png)
![](figures/捕获.png)
zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-list-item.md
浏览文件 @ 71d480cc
......@@ -11,7 +11,7 @@
## 子组件<a name="section9288143101012"></a>
支持。
支持单个子组件。
## 属性<a name="section2907183951110"></a>
......
zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-custom-slot.md
浏览文件 @ 71d480cc
......@@ -48,7 +48,7 @@
<div class="container">
<comp>
<text class="text-style" slot="second">插入第二个插槽中</text>
<text class="text-style" slot="sfirst">插入第一个插槽中</text>
<text class="text-style" slot="first">插入第一个插槽中</text>
</comp>
</div>
```
......
zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-grid-container.md
浏览文件 @ 71d480cc
# grid-container<a name="ZH-CN_TOPIC_0000001173324617"></a>
栅格布局容器根节点，使用grid-row与gird-col进行栅格布局。
栅格布局容器根节点，使用grid-row与grid-col进行栅格布局。
## 权限列表<a name="section11257113618419"></a>
......
zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-media-video.md
浏览文件 @ 71d480cc
......@@ -205,31 +205,31 @@
<a name="t0b0d71e0664f479d9fbcfe2cf45b34a0"></a>
<table><thead align="left"><tr id="r80520812e64447b7a841590ba3d1ecf9"><th class="cellrowborder" valign="top" width="28.000000000000004%" id="mcps1.1.4.1.1"><p id="ab440f3031e7242d1a1ee00ba387b151f"><a name="ab440f3031e7242d1a1ee00ba387b151f"></a><a name="ab440f3031e7242d1a1ee00ba387b151f"></a>名称</p>
</th>
<th class="cellrowborder" valign="top" width="42%" id="mcps1.1.4.1.2"><p id="a1e28b7e4cdc84e9eacc51b8ce51590df"><a name="a1e28b7e4cdc84e9eacc51b8ce51590df"></a><a name="a1e28b7e4cdc84e9eacc51b8ce51590df"></a>参数</p>
<th class="cellrowborder" valign="top" width="29.82%" id="mcps1.1.4.1.2"><p id="a1e28b7e4cdc84e9eacc51b8ce51590df"><a name="a1e28b7e4cdc84e9eacc51b8ce51590df"></a><a name="a1e28b7e4cdc84e9eacc51b8ce51590df"></a>参数</p>
</th>
<th class="cellrowborder" valign="top" width="30%" id="mcps1.1.4.1.3"><p id="ad91f1de026e24e60b0fe5078f4226f65"><a name="ad91f1de026e24e60b0fe5078f4226f65"></a><a name="ad91f1de026e24e60b0fe5078f4226f65"></a>描述</p>
<th class="cellrowborder" valign="top" width="42.18%" id="mcps1.1.4.1.3"><p id="ad91f1de026e24e60b0fe5078f4226f65"><a name="ad91f1de026e24e60b0fe5078f4226f65"></a><a name="ad91f1de026e24e60b0fe5078f4226f65"></a>描述</p>
</th>
</tr>
</thead>
<tbody><tr id="rab3c226807734a8d874bf83c939d52ad"><td class="cellrowborder" valign="top" width="28.000000000000004%" headers="mcps1.1.4.1.1 "><p id="ac317a80879064915a1a09cef7e3070d2"><a name="ac317a80879064915a1a09cef7e3070d2"></a><a name="ac317a80879064915a1a09cef7e3070d2"></a>start</p>
</td>
<td class="cellrowborder" valign="top" width="42%" headers="mcps1.1.4.1.2 "><p id="a1589994065b74673b39ff67b72e3ec82"><a name="a1589994065b74673b39ff67b72e3ec82"></a><a name="a1589994065b74673b39ff67b72e3ec82"></a>-</p>
<td class="cellrowborder" valign="top" width="29.82%" headers="mcps1.1.4.1.2 "><p id="a1589994065b74673b39ff67b72e3ec82"><a name="a1589994065b74673b39ff67b72e3ec82"></a><a name="a1589994065b74673b39ff67b72e3ec82"></a>-</p>
</td>
<td class="cellrowborder" valign="top" width="30%" headers="mcps1.1.4.1.3 "><p id="ad610eacf0ae748a0bd0611c6bd10d49d"><a name="ad610eacf0ae748a0bd0611c6bd10d49d"></a><a name="ad610eacf0ae748a0bd0611c6bd10d49d"></a>请求播放视频。</p>
<td class="cellrowborder" valign="top" width="42.18%" headers="mcps1.1.4.1.3 "><p id="ad610eacf0ae748a0bd0611c6bd10d49d"><a name="ad610eacf0ae748a0bd0611c6bd10d49d"></a><a name="ad610eacf0ae748a0bd0611c6bd10d49d"></a>请求播放视频。</p>
</td>
</tr>
<tr id="r74d47c5360ae4f87936bde197795b0e5"><td class="cellrowborder" valign="top" width="28.000000000000004%" headers="mcps1.1.4.1.1 "><p id="a5488606f848644c1b250b35137b770f9"><a name="a5488606f848644c1b250b35137b770f9"></a><a name="a5488606f848644c1b250b35137b770f9"></a>pause</p>
</td>
<td class="cellrowborder" valign="top" width="42%" headers="mcps1.1.4.1.2 "><p id="a715471504ba24456b9c69a09898e8025"><a name="a715471504ba24456b9c69a09898e8025"></a><a name="a715471504ba24456b9c69a09898e8025"></a>-</p>
<td class="cellrowborder" valign="top" width="29.82%" headers="mcps1.1.4.1.2 "><p id="a715471504ba24456b9c69a09898e8025"><a name="a715471504ba24456b9c69a09898e8025"></a><a name="a715471504ba24456b9c69a09898e8025"></a>-</p>
</td>
<td class="cellrowborder" valign="top" width="30%" headers="mcps1.1.4.1.3 "><p id="a4d7fc26ada3c4c9b86818e40259494e6"><a name="a4d7fc26ada3c4c9b86818e40259494e6"></a><a name="a4d7fc26ada3c4c9b86818e40259494e6"></a>请求暂停播放视频。</p>
<td class="cellrowborder" valign="top" width="42.18%" headers="mcps1.1.4.1.3 "><p id="a4d7fc26ada3c4c9b86818e40259494e6"><a name="a4d7fc26ada3c4c9b86818e40259494e6"></a><a name="a4d7fc26ada3c4c9b86818e40259494e6"></a>请求暂停播放视频。</p>
</td>
</tr>
<tr id="rc1629488abde4974938cc5c17937dbc6"><td class="cellrowborder" valign="top" width="28.000000000000004%" headers="mcps1.1.4.1.1 "><p id="a74f637bafd5348bb96414961031ca01d"><a name="a74f637bafd5348bb96414961031ca01d"></a><a name="a74f637bafd5348bb96414961031ca01d"></a>setCurrentTime</p>
</td>
<td class="cellrowborder" valign="top" width="42%" headers="mcps1.1.4.1.2 "><p id="a65bc7bf0576a4e47bff523bd15ca560c"><a name="a65bc7bf0576a4e47bff523bd15ca560c"></a><a name="a65bc7bf0576a4e47bff523bd15ca560c"></a>{ currenttime: value }</p>
<td class="cellrowborder" valign="top" width="29.82%" headers="mcps1.1.4.1.2 "><p id="a65bc7bf0576a4e47bff523bd15ca560c"><a name="a65bc7bf0576a4e47bff523bd15ca560c"></a><a name="a65bc7bf0576a4e47bff523bd15ca560c"></a>{ currenttime: value }</p>
</td>
<td class="cellrowborder" valign="top" width="30%" headers="mcps1.1.4.1.3 "><p id="a421ac9c67d5444338709bb7be34d06ec"><a name="a421ac9c67d5444338709bb7be34d06ec"></a><a name="a421ac9c67d5444338709bb7be34d06ec"></a>指定视频播放的进度位置，单位为s。</p>
<td class="cellrowborder" valign="top" width="42.18%" headers="mcps1.1.4.1.3 "><p id="a421ac9c67d5444338709bb7be34d06ec"><a name="a421ac9c67d5444338709bb7be34d06ec"></a><a name="a421ac9c67d5444338709bb7be34d06ec"></a>指定视频播放的进度位置，单位为s。</p>
</td>
</tr>
</tbody>
......
zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-animate.md
浏览文件 @ 71d480cc
......@@ -221,7 +221,7 @@
</div>
```
![](figures/1-1.gif)
![](figures/1-3.gif)
```
<!-- xxx.hml -->
......
zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework-js-tag.md
浏览文件 @ 71d480cc
......@@ -141,7 +141,7 @@ window用于定义与显示窗口相关的配置。对于屏幕适配问题，
```
{
"app": {
"bundleName": "com.huawei.player",
"bundleName": "com.example.player",
"version": {
"code": 1,
"name": "1.0"
......
zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-offscreencanvasrenderingcontext2d.md
浏览文件 @ 71d480cc
......@@ -72,139 +72,238 @@ var bitmap = offscreen.transferToImageBitmap();
ctx.transferFromImageBitmap(bitmap);
```
![](figures/zh-cn_image_0000001152773860.png)
![](figures/c3.png)
## 方法<a name="section47669296127"></a>
除支持与CanvasRenderingContext2D对象相同的方法外，还支持如下方法：
<a name="td0f869ce272e4d90b1c7df558ad7635e"></a>
<table><thead align="left"><tr id="rf11e90428c78465b9e3a0c3ec2222a3c"><th class="cellrowborder" valign="top" width="10.81%" id="mcps1.1.4.1.1"><p id="a11b4cb4edcf14b5584841b089cbea895"><a name="a11b4cb4edcf14b5584841b089cbea895"></a><a name="a11b4cb4edcf14b5584841b089cbea895"></a>名称</p>
</th>
<th class="cellrowborder" valign="top" width="26.19%" id="mcps1.1.4.1.2"><p id="ac56fe081db8a4ddca537c39d9abfcd33"><a name="ac56fe081db8a4ddca537c39d9abfcd33"></a><a name="ac56fe081db8a4ddca537c39d9abfcd33"></a>参数</p>
</th>
<th class="cellrowborder" valign="top" width="63%" id="mcps1.1.4.1.3"><p id="a05cdd2c741a54fe3a44575a5b2384be3"><a name="a05cdd2c741a54fe3a44575a5b2384be3"></a><a name="a05cdd2c741a54fe3a44575a5b2384be3"></a>描述</p>
</th>
</tr>
</thead>
<tbody><tr id="r960677f8f5e64d7f9b33b8a0ae0c824f"><td class="cellrowborder" valign="top" width="10.81%" headers="mcps1.1.4.1.1 "><p id="p931916913120"><a name="p931916913120"></a><a name="p931916913120"></a>isPointInPath</p>
<p id="p11907165844810"><a name="p11907165844810"></a><a name="p11907165844810"></a></p>
</td>
<td class="cellrowborder" valign="top" width="26.19%" headers="mcps1.1.4.1.2 "><p id="p13193144905014"><a name="p13193144905014"></a><a name="p13193144905014"></a>path?: Path2D, x: number, y: number</p>
</td>
<td class="cellrowborder" valign="top" width="63%" headers="mcps1.1.4.1.3 "><p id="p16545402518"><a name="p16545402518"></a><a name="p16545402518"></a>判断指定点是否在路径的区域内。</p>
<p id="p18921037165115"><a name="p18921037165115"></a><a name="p18921037165115"></a>path：可选对象，指定用来判断的路径。若没有设置，则使用当前路径</p>
<p id="p10885826185416"><a name="p10885826185416"></a><a name="p10885826185416"></a>x：待判断点的x轴坐标</p>
<p id="p17751133085419"><a name="p17751133085419"></a><a name="p17751133085419"></a>y：待判断点的y轴坐标</p>
</td>
</tr>
<tr id="row13364759185512"><td class="cellrowborder" valign="top" width="10.81%" headers="mcps1.1.4.1.1 "><p id="p5364145915552"><a name="p5364145915552"></a><a name="p5364145915552"></a>isPointInStroke</p>
</td>
<td class="cellrowborder" valign="top" width="26.19%" headers="mcps1.1.4.1.2 "><p id="p162714244571"><a name="p162714244571"></a><a name="p162714244571"></a>path?: Path2D, x: number, y: number</p>
</td>
<td class="cellrowborder" valign="top" width="63%" headers="mcps1.1.4.1.3 "><p id="p1336455955512"><a name="p1336455955512"></a><a name="p1336455955512"></a>判断指定点是否在路径的边缘线上。</p>
<p id="p1362284019185"><a name="p1362284019185"></a><a name="p1362284019185"></a>path：可选对象，指定用来判断的路径。若没有设置，则使用当前路径</p>
<p id="p1262224011185"><a name="p1262224011185"></a><a name="p1262224011185"></a>x：待判断点的x轴坐标</p>
<p id="p66220409182"><a name="p66220409182"></a><a name="p66220409182"></a>y：待判断点的y轴坐标</p>
</td>
</tr>
<tr id="row477613917194"><td class="cellrowborder" valign="top" width="10.81%" headers="mcps1.1.4.1.1 "><p id="p107779911916"><a name="p107779911916"></a><a name="p107779911916"></a>resetTransform</p>
</td>
<td class="cellrowborder" valign="top" width="26.19%" headers="mcps1.1.4.1.2 "><p id="p107771192192"><a name="p107771192192"></a><a name="p107771192192"></a>无</p>
</td>
<td class="cellrowborder" valign="top" width="63%" headers="mcps1.1.4.1.3 "><p id="p277714913197"><a name="p277714913197"></a><a name="p277714913197"></a>将当前变换重置为单位矩阵。</p>
</td>
</tr>
</tbody>
</table>
- isPointInPath示例
![](figures/zh-cn_image_0000001181449919.png)
```
<!-- xxx.hml -->
<div style="width: 180px; height: 60px;">
<text>In path:{{textValue}}</text>
</div>
<canvas ref="canvasId" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
```
### isPointInPath<a name="section12576152143713"></a>
isPointInPath\(path?: Path2D, x: number, y: number\): boolean
判断指定点是否在路径的区域内。
- 参数
<a name="table3592161817496"></a>
<table><thead align="left"><tr id="row19592141864916"><th class="cellrowborder" valign="top" width="21.04%" id="mcps1.1.5.1.1"><p id="p229575610288"><a name="p229575610288"></a><a name="p229575610288"></a>参数名</p>
</th>
<th class="cellrowborder" valign="top" width="15.260000000000002%" id="mcps1.1.5.1.2"><p id="p929585682819"><a name="p929585682819"></a><a name="p929585682819"></a>参数类型</p>
</th>
<th class="cellrowborder" valign="top" width="7.5200000000000005%" id="mcps1.1.5.1.3"><p id="p988715163459"><a name="p988715163459"></a><a name="p988715163459"></a>必填</p>
</th>
<th class="cellrowborder" valign="top" width="56.18%" id="mcps1.1.5.1.4"><p id="p1929645618282"><a name="p1929645618282"></a><a name="p1929645618282"></a>描述</p>
</th>
</tr>
</thead>
<tbody><tr id="row1559261834915"><td class="cellrowborder" valign="top" width="21.04%" headers="mcps1.1.5.1.1 "><p id="p115927183493"><a name="p115927183493"></a><a name="p115927183493"></a>path</p>
</td>
<td class="cellrowborder" valign="top" width="15.260000000000002%" headers="mcps1.1.5.1.2 "><p id="p95921918114914"><a name="p95921918114914"></a><a name="p95921918114914"></a>Path2D</p>
</td>
<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.5.1.3 "><p id="p1188716161453"><a name="p1188716161453"></a><a name="p1188716161453"></a>否</p>
</td>
<td class="cellrowborder" valign="top" width="56.18%" headers="mcps1.1.5.1.4 "><p id="p168291512124013"><a name="p168291512124013"></a><a name="p168291512124013"></a>可选对象，指定用来判断的路径。若没有设置，则使用当前路径。</p>
</td>
</tr>
<tr id="row195921118184916"><td class="cellrowborder" valign="top" width="21.04%" headers="mcps1.1.5.1.1 "><p id="p1622015388394"><a name="p1622015388394"></a><a name="p1622015388394"></a>x</p>
</td>
<td class="cellrowborder" valign="top" width="15.260000000000002%" headers="mcps1.1.5.1.2 "><p id="p1635295333919"><a name="p1635295333919"></a><a name="p1635295333919"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.5.1.3 "><p id="p17887616174515"><a name="p17887616174515"></a><a name="p17887616174515"></a>是</p>
</td>
<td class="cellrowborder" valign="top" width="56.18%" headers="mcps1.1.5.1.4 "><p id="p6592518124911"><a name="p6592518124911"></a><a name="p6592518124911"></a>待判断点的x轴坐标。</p>
</td>
</tr>
<tr id="row449114413392"><td class="cellrowborder" valign="top" width="21.04%" headers="mcps1.1.5.1.1 "><p id="p1349212448390"><a name="p1349212448390"></a><a name="p1349212448390"></a>y</p>
</td>
<td class="cellrowborder" valign="top" width="15.260000000000002%" headers="mcps1.1.5.1.2 "><p id="p44927443396"><a name="p44927443396"></a><a name="p44927443396"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.5.1.3 "><p id="p18888101694519"><a name="p18888101694519"></a><a name="p18888101694519"></a>是</p>
</td>
<td class="cellrowborder" valign="top" width="56.18%" headers="mcps1.1.5.1.4 "><p id="p79061374406"><a name="p79061374406"></a><a name="p79061374406"></a>待判断点的y轴坐标。</p>
</td>
</tr>
</tbody>
</table>
- 返回值
<a name="table0782932202818"></a>
<table><thead align="left"><tr id="row3782832172814"><th class="cellrowborder" valign="top" width="19.77%" id="mcps1.1.3.1.1"><p id="p1278314323284"><a name="p1278314323284"></a><a name="p1278314323284"></a>类型</p>
</th>
<th class="cellrowborder" valign="top" width="80.23%" id="mcps1.1.3.1.2"><p id="p17783153216281"><a name="p17783153216281"></a><a name="p17783153216281"></a>说明</p>
</th>
</tr>
</thead>
<tbody><tr id="row278317321285"><td class="cellrowborder" valign="top" width="19.77%" headers="mcps1.1.3.1.1 "><p id="p98384418408"><a name="p98384418408"></a><a name="p98384418408"></a>boolean</p>
</td>
<td class="cellrowborder" valign="top" width="80.23%" headers="mcps1.1.3.1.2 "><p id="p1537310444489"><a name="p1537310444489"></a><a name="p1537310444489"></a>指定点是否在路径的区域内。</p>
</td>
</tr>
</tbody>
</table>
```
// xxx.js
export default {
data: {
textValue: 0
},
onShow(){
var canvas = this.$refs.canvas.getContext('2d');
var offscreen = new OffscreenCanvas(500,500);
var offscreenCanvasCtx = offscreen.getContext("2d");
offscreenCanvasCtx.rect(10, 10, 100, 100);
offscreenCanvasCtx.fill();
this.textValue = offscreenCanvasCtx.isPointInPath(30, 70);
- 示例
var bitmap = offscreen.transferToImageBitmap();
canvas.transferFromImageBitmap(bitmap);
}
}
```
```
<!-- xxx.hml -->
<div style="width: 180px; height: 60px;">
<text>In path:{{textValue}}</text>
</div>
<canvas ref="canvasId" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
```
```
// xxx.js
export default {
data: {
textValue: 0
},
onShow(){
var canvas = this.$refs.canvas.getContext('2d');
var offscreen = new OffscreenCanvas(500,500);
var offscreenCanvasCtx = offscreen.getContext("2d");
offscreenCanvasCtx.rect(10, 10, 100, 100);
offscreenCanvasCtx.fill();
this.textValue = offscreenCanvasCtx.isPointInPath(30, 70);
var bitmap = offscreen.transferToImageBitmap();
canvas.transferFromImageBitmap(bitmap);
}
}
```
![](figures/zh-cn_image_0000001224354967.png)
### isPointInStroke<a name="section18889155054014"></a>
isPointInStroke\(path?: Path2D, x: number, y: number\): boolean
判断指定点是否在路径的边缘线上。
- 参数
<a name="table101720539407"></a>
<table><thead align="left"><tr id="row1317185315401"><th class="cellrowborder" valign="top" width="21.04%" id="mcps1.1.5.1.1"><p id="p71725384017"><a name="p71725384017"></a><a name="p71725384017"></a>参数名</p>
</th>
<th class="cellrowborder" valign="top" width="15.260000000000002%" id="mcps1.1.5.1.2"><p id="p171715334016"><a name="p171715334016"></a><a name="p171715334016"></a>参数类型</p>
</th>
<th class="cellrowborder" valign="top" width="7.5200000000000005%" id="mcps1.1.5.1.3"><p id="p1182841194515"><a name="p1182841194515"></a><a name="p1182841194515"></a>必填</p>
</th>
<th class="cellrowborder" valign="top" width="56.18%" id="mcps1.1.5.1.4"><p id="p171718539408"><a name="p171718539408"></a><a name="p171718539408"></a>描述</p>
</th>
</tr>
</thead>
<tbody><tr id="row121716534405"><td class="cellrowborder" valign="top" width="21.04%" headers="mcps1.1.5.1.1 "><p id="p1717953184014"><a name="p1717953184014"></a><a name="p1717953184014"></a>path</p>
</td>
<td class="cellrowborder" valign="top" width="15.260000000000002%" headers="mcps1.1.5.1.2 "><p id="p171817535409"><a name="p171817535409"></a><a name="p171817535409"></a>Path2D</p>
</td>
<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.5.1.3 "><p id="p8822419452"><a name="p8822419452"></a><a name="p8822419452"></a>否</p>
</td>
<td class="cellrowborder" valign="top" width="56.18%" headers="mcps1.1.5.1.4 "><p id="p91855319403"><a name="p91855319403"></a><a name="p91855319403"></a>可选对象，指定用来判断的路径。若没有设置，则使用当前路径。</p>
</td>
</tr>
<tr id="row1181653114010"><td class="cellrowborder" valign="top" width="21.04%" headers="mcps1.1.5.1.1 "><p id="p518253104016"><a name="p518253104016"></a><a name="p518253104016"></a>x</p>
</td>
<td class="cellrowborder" valign="top" width="15.260000000000002%" headers="mcps1.1.5.1.2 "><p id="p17181653194010"><a name="p17181653194010"></a><a name="p17181653194010"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.5.1.3 "><p id="p48214116452"><a name="p48214116452"></a><a name="p48214116452"></a>是</p>
</td>
<td class="cellrowborder" valign="top" width="56.18%" headers="mcps1.1.5.1.4 "><p id="p518185344013"><a name="p518185344013"></a><a name="p518185344013"></a>待判断点的x轴坐标。</p>
</td>
</tr>
<tr id="row118185354016"><td class="cellrowborder" valign="top" width="21.04%" headers="mcps1.1.5.1.1 "><p id="p91895354013"><a name="p91895354013"></a><a name="p91895354013"></a>y</p>
</td>
<td class="cellrowborder" valign="top" width="15.260000000000002%" headers="mcps1.1.5.1.2 "><p id="p1318953104011"><a name="p1318953104011"></a><a name="p1318953104011"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.5.1.3 "><p id="p782114119457"><a name="p782114119457"></a><a name="p782114119457"></a>是</p>
</td>
<td class="cellrowborder" valign="top" width="56.18%" headers="mcps1.1.5.1.4 "><p id="p2018195312409"><a name="p2018195312409"></a><a name="p2018195312409"></a>待判断点的y轴坐标。</p>
</td>
</tr>
</tbody>
</table>
- 返回值
<a name="table3572363195"></a>
<table><thead align="left"><tr id="row1572669197"><th class="cellrowborder" valign="top" width="19.77%" id="mcps1.1.3.1.1"><p id="p1857211681912"><a name="p1857211681912"></a><a name="p1857211681912"></a>类型</p>
</th>
<th class="cellrowborder" valign="top" width="80.23%" id="mcps1.1.3.1.2"><p id="p1257216171910"><a name="p1257216171910"></a><a name="p1257216171910"></a>说明</p>
</th>
</tr>
</thead>
<tbody><tr id="row195722063190"><td class="cellrowborder" valign="top" width="19.77%" headers="mcps1.1.3.1.1 "><p id="p8572369196"><a name="p8572369196"></a><a name="p8572369196"></a>boolean</p>
</td>
<td class="cellrowborder" valign="top" width="80.23%" headers="mcps1.1.3.1.2 "><p id="p12572186101919"><a name="p12572186101919"></a><a name="p12572186101919"></a>指定点是否在路径的区域内。</p>
</td>
</tr>
</tbody>
</table>
- isPointInStroke示例
- 示例
![](figures/zh-cn_image_0000001181458721.png)
```
<!-- xxx.hml -->
<div style="width: 180px; height: 60px;">
<text>In path:{{textValue}}</text>
</div>
<canvas ref="canvasId" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
```
```
// xxx.js
export default {
data: {
textValue: 0
},
onShow(){
var canvas = this.$refs.canvas.getContext('2d');
var offscreen = new OffscreenCanvas(500,500);
var offscreenCanvasCtx = offscreen.getContext("2d");
offscreenCanvasCtx.rect(10, 10, 100, 100);
offscreenCanvasCtx.stroke();
this.textValue = offscreenCanvasCtx.isPointInStroke(50, 10);
var bitmap = offscreen.transferToImageBitmap();
canvas.transferFromImageBitmap(bitmap);
}
}
```
![](figures/zh-cn_image_0000001178875308.png)
### resetTransform<a name="section1098812560426"></a>
resetTransform\(\): void
```
<!-- xxx.hml -->
<div style="width: 180px; height: 60px;">
<text>In path:{{textValue}}</text>
</div>
<canvas ref="canvasId" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
```
- 示例
```
// xxx.js
export default {
data: {
textValue: 0
},
onShow(){
```
var canvas = this.$refs.canvas.getContext('2d');
var offscreen = new OffscreenCanvas(500,500);
var offscreenCanvasCtx = offscreen.getContext("2d");
offscreenCanvasCtx.rect(10, 10, 100, 100);
offscreenCanvasCtx.stroke();
this.textValue = offscreenCanvasCtx.isPointInStroke(50, 10);
offscreenCanvasCtx.transform(1, 0, 1.7, 1, 0, 0);
offscreenCanvasCtx.fillStyle = 'gray';
offscreenCanvasCtx.fillRect(40, 40, 50, 20);
offscreenCanvasCtx.fillRect(40, 90, 50, 20);
// Non-skewed rectangles
offscreenCanvasCtx.resetTransform();
offscreenCanvasCtx.fillStyle = 'red';
offscreenCanvasCtx.fillRect(40, 40, 50, 20);
offscreenCanvasCtx.fillRect(40, 90, 50, 20);
var bitmap = offscreen.transferToImageBitmap();
canvas.transferFromImageBitmap(bitmap);
}
}
```
- resetTransform示例
```
![](figures/zh-cn_image_0000001135171488.png)
![](figures/zh-cn_image_0000001179035242.png)
```
var canvas = this.$refs.canvas.getContext('2d');
var offscreen = new OffscreenCanvas(500,500);
var offscreenCanvasCtx = offscreen.getContext("2d");
offscreenCanvasCtx.transform(1, 0, 1.7, 1, 0, 0);
offscreenCanvasCtx.fillStyle = 'gray';
offscreenCanvasCtx.fillRect(40, 40, 50, 20);
offscreenCanvasCtx.fillRect(40, 90, 50, 20);
// Non-skewed rectangles
offscreenCanvasCtx.resetTransform();
offscreenCanvasCtx.fillStyle = 'red';
offscreenCanvasCtx.fillRect(40, 40, 50, 20);
offscreenCanvasCtx.fillRect(40, 90, 50, 20);
var bitmap = offscreen.transferToImageBitmap();
canvas.transferFromImageBitmap(bitmap);
```
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或