1# OffscreenCanvas对象<a name="ZH-CN_TOPIC_0000001209412141"></a> 2 3> **说明：** 4>从API Version 7 开始支持。 5 6可以离屏渲染的canvas对象。 7 8## 属性<a name="zh-cn_topic_0000001180744579_section661391987"></a> 9 10<a name="zh-cn_topic_0000001180744579_table67211828124016"></a> 11<table><thead align="left"><tr id="zh-cn_topic_0000001180744579_row108577289405"><th class="cellrowborder" valign="top" width="22.872287228722872%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001180744579_p385742814403"><a name="zh-cn_topic_0000001180744579_p385742814403"></a><a name="zh-cn_topic_0000001180744579_p385742814403"></a>属性</p> 12</th> 13<th class="cellrowborder" valign="top" width="29.352935293529352%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001180744579_p19857192816408"><a name="zh-cn_topic_0000001180744579_p19857192816408"></a><a name="zh-cn_topic_0000001180744579_p19857192816408"></a>类型</p> 14</th> 15<th class="cellrowborder" valign="top" width="47.774777477747776%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001180744579_p18573288402"><a name="zh-cn_topic_0000001180744579_p18573288402"></a><a name="zh-cn_topic_0000001180744579_p18573288402"></a>描述</p> 16</th> 17</tr> 18</thead> 19<tbody><tr id="zh-cn_topic_0000001180744579_row1085792824019"><td class="cellrowborder" valign="top" width="22.872287228722872%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001180744579_p1485792815404"><a name="zh-cn_topic_0000001180744579_p1485792815404"></a><a name="zh-cn_topic_0000001180744579_p1485792815404"></a>width</p> 20</td> 21<td class="cellrowborder" valign="top" width="29.352935293529352%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001180744579_p11857182804010"><a name="zh-cn_topic_0000001180744579_p11857182804010"></a><a name="zh-cn_topic_0000001180744579_p11857182804010"></a>number</p> 22</td> 23<td class="cellrowborder" valign="top" width="47.774777477747776%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001180744579_p1785711281405"><a name="zh-cn_topic_0000001180744579_p1785711281405"></a><a name="zh-cn_topic_0000001180744579_p1785711281405"></a>offscreen canvas对象的宽度。</p> 24</td> 25</tr> 26<tr id="zh-cn_topic_0000001180744579_row3857132812406"><td class="cellrowborder" valign="top" width="22.872287228722872%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001180744579_p88572283404"><a name="zh-cn_topic_0000001180744579_p88572283404"></a><a name="zh-cn_topic_0000001180744579_p88572283404"></a>height</p> 27</td> 28<td class="cellrowborder" valign="top" width="29.352935293529352%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001180744579_p198571828114017"><a name="zh-cn_topic_0000001180744579_p198571828114017"></a><a name="zh-cn_topic_0000001180744579_p198571828114017"></a>number</p> 29</td> 30<td class="cellrowborder" valign="top" width="47.774777477747776%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001180744579_p3857192844012"><a name="zh-cn_topic_0000001180744579_p3857192844012"></a><a name="zh-cn_topic_0000001180744579_p3857192844012"></a>offscreen canvas对象的高度。</p> 31</td> 32</tr> 33</tbody> 34</table> 35 36## 方法<a name="zh-cn_topic_0000001180744579_section47669296127"></a> 37 38<a name="zh-cn_topic_0000001180744579_td0f869ce272e4d90b1c7df558ad7635e"></a> 39<table><thead align="left"><tr id="zh-cn_topic_0000001180744579_rf11e90428c78465b9e3a0c3ec2222a3c"><th class="cellrowborder" valign="top" width="11.68%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001180744579_a11b4cb4edcf14b5584841b089cbea895"><a name="zh-cn_topic_0000001180744579_a11b4cb4edcf14b5584841b089cbea895"></a><a name="zh-cn_topic_0000001180744579_a11b4cb4edcf14b5584841b089cbea895"></a>名称</p> 40</th> 41<th class="cellrowborder" valign="top" width="25.319999999999997%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001180744579_ac56fe081db8a4ddca537c39d9abfcd33"><a name="zh-cn_topic_0000001180744579_ac56fe081db8a4ddca537c39d9abfcd33"></a><a name="zh-cn_topic_0000001180744579_ac56fe081db8a4ddca537c39d9abfcd33"></a>参数</p> 42</th> 43<th class="cellrowborder" valign="top" width="63%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001180744579_a05cdd2c741a54fe3a44575a5b2384be3"><a name="zh-cn_topic_0000001180744579_a05cdd2c741a54fe3a44575a5b2384be3"></a><a name="zh-cn_topic_0000001180744579_a05cdd2c741a54fe3a44575a5b2384be3"></a>描述</p> 44</th> 45</tr> 46</thead> 47<tbody><tr id="zh-cn_topic_0000001180744579_r960677f8f5e64d7f9b33b8a0ae0c824f"><td class="cellrowborder" valign="top" width="11.68%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001180744579_p931916913120"><a name="zh-cn_topic_0000001180744579_p931916913120"></a><a name="zh-cn_topic_0000001180744579_p931916913120"></a>getContext</p> 48</td> 49<td class="cellrowborder" valign="top" width="25.319999999999997%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001180744579_p123073254554"><a name="zh-cn_topic_0000001180744579_p123073254554"></a><a name="zh-cn_topic_0000001180744579_p123073254554"></a>contextId: "2d", options?: CanvasRenderingContext2DSettings</p> 50</td> 51<td class="cellrowborder" valign="top" width="63%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001180744579_p176180219405"><a name="zh-cn_topic_0000001180744579_p176180219405"></a><a name="zh-cn_topic_0000001180744579_p176180219405"></a>调用方法如下两种：</p> 52<p id="zh-cn_topic_0000001180744579_p1161802114405"><a name="zh-cn_topic_0000001180744579_p1161802114405"></a><a name="zh-cn_topic_0000001180744579_p1161802114405"></a>var ctx = canvas.getContext(contextId);</p> 53<p id="zh-cn_topic_0000001180744579_p1161882115404"><a name="zh-cn_topic_0000001180744579_p1161882115404"></a><a name="zh-cn_topic_0000001180744579_p1161882115404"></a>var ctx = canvas.getContext(contextId, options);</p> 54<p id="zh-cn_topic_0000001180744579_p1361802194016"><a name="zh-cn_topic_0000001180744579_p1361802194016"></a><a name="zh-cn_topic_0000001180744579_p1361802194016"></a>其中contextId为必填项，当前仅支持"2d"，options为可选项，暂时不支持。</p> 55<p id="zh-cn_topic_0000001180744579_p1260014407342"><a name="zh-cn_topic_0000001180744579_p1260014407342"></a><a name="zh-cn_topic_0000001180744579_p1260014407342"></a>获取offscreen canvas绘图上下文，参数仅支持“2d”，返回值为2D绘制对象，该对象提供具体的2D绘制操作。详见<a href="js-components-canvas-offscreencanvasrenderingcontext2d.md">OffscreenCanvasRenderingContext2D</a>对象章节。</p> 56</td> 57</tr> 58<tr id="zh-cn_topic_0000001180744579_row13364759185512"><td class="cellrowborder" valign="top" width="11.68%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001180744579_p93374133418"><a name="zh-cn_topic_0000001180744579_p93374133418"></a><a name="zh-cn_topic_0000001180744579_p93374133418"></a>toDataURL</p> 59</td> 60<td class="cellrowborder" valign="top" width="25.319999999999997%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001180744579_p74131655155410"><a name="zh-cn_topic_0000001180744579_p74131655155410"></a><a name="zh-cn_topic_0000001180744579_p74131655155410"></a>type?: string, quality?: number</p> 61</td> 62<td class="cellrowborder" valign="top" width="63%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001180744579_p1336455955512"><a name="zh-cn_topic_0000001180744579_p1336455955512"></a><a name="zh-cn_topic_0000001180744579_p1336455955512"></a>生成一个包含图片展示的URL。</p> 63<a name="zh-cn_topic_0000001180744579_ul155726311612"></a><a name="zh-cn_topic_0000001180744579_ul155726311612"></a><ul id="zh-cn_topic_0000001180744579_ul155726311612"><li>type：可选参数，用于指定图像格式，默认格式为image/png。</li><li>quality：在指定图片格式为image/jpeg或image/webp的情况下，可以从0到1的区间内选择图片的质量。如果超出取值范围，将会使用默认值0.92。</li></ul> 64</td> 65</tr> 66<tr id="zh-cn_topic_0000001180744579_row1350184614429"><td class="cellrowborder" valign="top" width="11.68%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001180744579_p11501134614422"><a name="zh-cn_topic_0000001180744579_p11501134614422"></a><a name="zh-cn_topic_0000001180744579_p11501134614422"></a>transferToImageBitmap</p> 67</td> 68<td class="cellrowborder" valign="top" width="25.319999999999997%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001180744579_p135011946194215"><a name="zh-cn_topic_0000001180744579_p135011946194215"></a><a name="zh-cn_topic_0000001180744579_p135011946194215"></a>无</p> 69</td> 70<td class="cellrowborder" valign="top" width="63%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001180744579_p20502164624212"><a name="zh-cn_topic_0000001180744579_p20502164624212"></a><a name="zh-cn_topic_0000001180744579_p20502164624212"></a>从OffscreenCanvas最近渲染的图像创建一个 ImageBitmap 对象</p> 71</td> 72</tr> 73</tbody> 74</table> 75 76## 示例<a name="zh-cn_topic_0000001180744579_section13457717134912"></a> 77 78``` 79var canvas = this.$refs.canvasId.getContext('2d'); 80var offscreen = new OffscreenCanvas(500,500); 81var offscreenCanvasCtx = offscreen.getContext("2d"); 82 83// ... some drawing for the canvas using the offscreenCanvasCtx ... 84 85var dataURL = offscreen.toDataURL(); 86console.log(dataURL); //data:image/png;base64,xxxxxx 87 88var bitmap = offscreen.transferToImageBitmap(); 89canvas.transferFromImageBitmap(bitmap); 90``` 91 92
