1# OffscreenCanvasRenderingContext2D对象<a name="ZH-CN_TOPIC_0000001209252177"></a> 2 3> **说明：** 4>从API Version 7 开始支持。 5 6使用OffscreenCanvasRenderingContext2D在offscreen canvas上进行绘制，绘制对象可以是矩形、文本、图片等。 7 8## 属性<a name="zh-cn_topic_0000001180864495_section661391987"></a> 9 10除支持与CanvasRenderingContext2D对象相同的属性外，还支持如下属性： 11 12<a name="zh-cn_topic_0000001180864495_table67211828124016"></a> 13<table><thead align="left"><tr id="zh-cn_topic_0000001180864495_row108577289405"><th class="cellrowborder" valign="top" width="22.872287228722872%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001180864495_p385742814403"><a name="zh-cn_topic_0000001180864495_p385742814403"></a><a name="zh-cn_topic_0000001180864495_p385742814403"></a>属性</p> 14</th> 15<th class="cellrowborder" valign="top" width="29.352935293529352%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001180864495_p19857192816408"><a name="zh-cn_topic_0000001180864495_p19857192816408"></a><a name="zh-cn_topic_0000001180864495_p19857192816408"></a>类型</p> 16</th> 17<th class="cellrowborder" valign="top" width="47.774777477747776%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001180864495_p18573288402"><a name="zh-cn_topic_0000001180864495_p18573288402"></a><a name="zh-cn_topic_0000001180864495_p18573288402"></a>描述</p> 18</th> 19</tr> 20</thead> 21<tbody><tr id="zh-cn_topic_0000001180864495_row85971918336"><td class="cellrowborder" valign="top" width="22.872287228722872%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001180864495_p155980933313"><a name="zh-cn_topic_0000001180864495_p155980933313"></a><a name="zh-cn_topic_0000001180864495_p155980933313"></a>filter</p> 22</td> 23<td class="cellrowborder" valign="top" width="29.352935293529352%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001180864495_p735764418306"><a name="zh-cn_topic_0000001180864495_p735764418306"></a><a name="zh-cn_topic_0000001180864495_p735764418306"></a>string</p> 24</td> 25<td class="cellrowborder" valign="top" width="47.774777477747776%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001180864495_p1059819912335"><a name="zh-cn_topic_0000001180864495_p1059819912335"></a><a name="zh-cn_topic_0000001180864495_p1059819912335"></a>设置图像的滤镜，支持的滤镜效果如下：</p> 26<a name="zh-cn_topic_0000001180864495_ul03421175334"></a><a name="zh-cn_topic_0000001180864495_ul03421175334"></a><ul id="zh-cn_topic_0000001180864495_ul03421175334"><li>blur：给图像设置高斯模糊</li><li>brightness：给图片应用一种线性乘法，使其看起来更亮或更暗</li><li>contrast：调整图像的对比度</li><li>drop-shadow：给图像设置一个阴影效果</li><li>grayscale：将图像转换为灰度图像</li><li>hue-rotate：给图像应用色相旋转</li><li>invert：反转输入图像</li><li>opacity：转化图像的透明程度</li><li>saturate：转换图像饱和度</li><li>sepia：将图像转换为深褐色</li></ul> 27</td> 28</tr> 29</tbody> 30</table> 31 32- 示例 33 34``` 35var ctx = this.$refs.canvasid.getContext('2d'); 36var offscreen = new OffscreenCanvas(360, 500); 37var offCanvas2 = offscreen.getContext("2d"); 38var img = new Image(); 39img.src = 'common/images/example.jpg'; 40offCanvas2.drawImage(img, 0, 0, 100, 100); 41offCanvas2.filter = 'blur(5px)'; 42offCanvas2.drawImage(img, 100, 0, 100, 100); 43 44offCanvas2.filter = 'grayscale(50%)'; 45offCanvas2.drawImage(img, 200, 0, 100, 100); 46 47offCanvas2.filter = 'hue-rotate(90deg)'; 48offCanvas2.drawImage(img, 0, 100, 100, 100); 49 50offCanvas2.filter = 'invert(100%)'; 51offCanvas2.drawImage(img, 100, 100, 100, 100); 52 53offCanvas2.filter = 'drop-shadow(8px 8px 10px green)'; 54offCanvas2.drawImage(img, 200, 100, 100, 100); 55 56offCanvas2.filter = 'brightness(0.4)'; 57offCanvas2.drawImage(img, 0, 200, 100, 100); 58 59offCanvas2.filter = 'opacity(25%)'; 60offCanvas2.drawImage(img, 100, 200, 100, 100); 61 62offCanvas2.filter = 'saturate(30%)'; 63offCanvas2.drawImage(img, 200, 200, 100, 100); 64 65offCanvas2.filter = 'sepia(60%)'; 66offCanvas2.drawImage(img, 0, 300, 100, 100); 67 68offCanvas2.filter = 'contrast(200%)'; 69offCanvas2.drawImage(img, 100, 300, 100, 100); 70var bitmap = offscreen.transferToImageBitmap(); 71ctx.transferFromImageBitmap(bitmap); 72``` 73 74 75 76## 方法<a name="zh-cn_topic_0000001180864495_section47669296127"></a> 77 78除支持与CanvasRenderingContext2D对象相同的方法外，还支持如下方法： 79 80<a name="zh-cn_topic_0000001180864495_td0f869ce272e4d90b1c7df558ad7635e"></a> 81<table><thead align="left"><tr id="zh-cn_topic_0000001180864495_rf11e90428c78465b9e3a0c3ec2222a3c"><th class="cellrowborder" valign="top" width="10.81%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001180864495_a11b4cb4edcf14b5584841b089cbea895"><a name="zh-cn_topic_0000001180864495_a11b4cb4edcf14b5584841b089cbea895"></a><a name="zh-cn_topic_0000001180864495_a11b4cb4edcf14b5584841b089cbea895"></a>名称</p> 82</th> 83<th class="cellrowborder" valign="top" width="26.19%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001180864495_ac56fe081db8a4ddca537c39d9abfcd33"><a name="zh-cn_topic_0000001180864495_ac56fe081db8a4ddca537c39d9abfcd33"></a><a name="zh-cn_topic_0000001180864495_ac56fe081db8a4ddca537c39d9abfcd33"></a>参数</p> 84</th> 85<th class="cellrowborder" valign="top" width="63%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001180864495_a05cdd2c741a54fe3a44575a5b2384be3"><a name="zh-cn_topic_0000001180864495_a05cdd2c741a54fe3a44575a5b2384be3"></a><a name="zh-cn_topic_0000001180864495_a05cdd2c741a54fe3a44575a5b2384be3"></a>描述</p> 86</th> 87</tr> 88</thead> 89<tbody><tr id="zh-cn_topic_0000001180864495_r960677f8f5e64d7f9b33b8a0ae0c824f"><td class="cellrowborder" valign="top" width="10.81%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001180864495_p931916913120"><a name="zh-cn_topic_0000001180864495_p931916913120"></a><a name="zh-cn_topic_0000001180864495_p931916913120"></a>isPointInPath</p> 90<p id="zh-cn_topic_0000001180864495_p11907165844810"><a name="zh-cn_topic_0000001180864495_p11907165844810"></a><a name="zh-cn_topic_0000001180864495_p11907165844810"></a></p> 91</td> 92<td class="cellrowborder" valign="top" width="26.19%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001180864495_p13193144905014"><a name="zh-cn_topic_0000001180864495_p13193144905014"></a><a name="zh-cn_topic_0000001180864495_p13193144905014"></a>path?: Path2D, x: number, y: number</p> 93</td> 94<td class="cellrowborder" valign="top" width="63%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001180864495_p16545402518"><a name="zh-cn_topic_0000001180864495_p16545402518"></a><a name="zh-cn_topic_0000001180864495_p16545402518"></a>判断指定点是否在路径的区域内。</p> 95<p id="zh-cn_topic_0000001180864495_p18921037165115"><a name="zh-cn_topic_0000001180864495_p18921037165115"></a><a name="zh-cn_topic_0000001180864495_p18921037165115"></a>path：可选对象，指定用来判断的路径。若没有设置，则使用当前路径</p> 96<p id="zh-cn_topic_0000001180864495_p10885826185416"><a name="zh-cn_topic_0000001180864495_p10885826185416"></a><a name="zh-cn_topic_0000001180864495_p10885826185416"></a>x：待判断点的x轴坐标</p> 97<p id="zh-cn_topic_0000001180864495_p17751133085419"><a name="zh-cn_topic_0000001180864495_p17751133085419"></a><a name="zh-cn_topic_0000001180864495_p17751133085419"></a>y：待判断点的y轴坐标</p> 98</td> 99</tr> 100<tr id="zh-cn_topic_0000001180864495_row13364759185512"><td class="cellrowborder" valign="top" width="10.81%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001180864495_p5364145915552"><a name="zh-cn_topic_0000001180864495_p5364145915552"></a><a name="zh-cn_topic_0000001180864495_p5364145915552"></a>isPointInStroke</p> 101</td> 102<td class="cellrowborder" valign="top" width="26.19%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001180864495_p162714244571"><a name="zh-cn_topic_0000001180864495_p162714244571"></a><a name="zh-cn_topic_0000001180864495_p162714244571"></a>path?: Path2D, x: number, y: number</p> 103</td> 104<td class="cellrowborder" valign="top" width="63%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001180864495_p1336455955512"><a name="zh-cn_topic_0000001180864495_p1336455955512"></a><a name="zh-cn_topic_0000001180864495_p1336455955512"></a>判断指定点是否在路径的边缘线上。</p> 105<p id="zh-cn_topic_0000001180864495_p1362284019185"><a name="zh-cn_topic_0000001180864495_p1362284019185"></a><a name="zh-cn_topic_0000001180864495_p1362284019185"></a>path：可选对象，指定用来判断的路径。若没有设置，则使用当前路径</p> 106<p id="zh-cn_topic_0000001180864495_p1262224011185"><a name="zh-cn_topic_0000001180864495_p1262224011185"></a><a name="zh-cn_topic_0000001180864495_p1262224011185"></a>x：待判断点的x轴坐标</p> 107<p id="zh-cn_topic_0000001180864495_p66220409182"><a name="zh-cn_topic_0000001180864495_p66220409182"></a><a name="zh-cn_topic_0000001180864495_p66220409182"></a>y：待判断点的y轴坐标</p> 108</td> 109</tr> 110<tr id="zh-cn_topic_0000001180864495_row477613917194"><td class="cellrowborder" valign="top" width="10.81%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001180864495_p107779911916"><a name="zh-cn_topic_0000001180864495_p107779911916"></a><a name="zh-cn_topic_0000001180864495_p107779911916"></a>resetTransform</p> 111</td> 112<td class="cellrowborder" valign="top" width="26.19%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001180864495_p107771192192"><a name="zh-cn_topic_0000001180864495_p107771192192"></a><a name="zh-cn_topic_0000001180864495_p107771192192"></a>无</p> 113</td> 114<td class="cellrowborder" valign="top" width="63%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001180864495_p277714913197"><a name="zh-cn_topic_0000001180864495_p277714913197"></a><a name="zh-cn_topic_0000001180864495_p277714913197"></a>将当前变换重置为单位矩阵。</p> 115</td> 116</tr> 117</tbody> 118</table> 119 120- isPointInPath示例 121 122  123 124 ``` 125 <!-- xxx.hml --> 126 <div style="width: 180px; height: 60px;"> 127 <text>In path:{{textValue}}</text> 128 </div> 129 <canvas ref="canvasId" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas> 130 ``` 131 132 ``` 133 // xxx.js 134 export default { 135 data: { 136 textValue: 0 137 }, 138 onShow(){ 139 var canvas = this.$refs.canvas.getContext('2d'); 140 var offscreen = new OffscreenCanvas(500,500); 141 var offscreenCanvasCtx = offscreen.getContext("2d"); 142 143 offscreenCanvasCtx.rect(10, 10, 100, 100); 144 offscreenCanvasCtx.fill(); 145 this.textValue = offscreenCanvasCtx.isPointInPath(30, 70); 146 147 var bitmap = offscreen.transferToImageBitmap(); 148 canvas.transferFromImageBitmap(bitmap); 149 } 150 } 151 ``` 152 153 154- isPointInStroke示例 155 156  157 158 ``` 159 <!-- xxx.hml --> 160 <div style="width: 180px; height: 60px;"> 161 <text>In path:{{textValue}}</text> 162 </div> 163 <canvas ref="canvasId" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas> 164 ``` 165 166 ``` 167 // xxx.js 168 export default { 169 data: { 170 textValue: 0 171 }, 172 onShow(){ 173 var canvas = this.$refs.canvas.getContext('2d'); 174 var offscreen = new OffscreenCanvas(500,500); 175 var offscreenCanvasCtx = offscreen.getContext("2d"); 176 177 offscreenCanvasCtx.rect(10, 10, 100, 100); 178 offscreenCanvasCtx.stroke(); 179 this.textValue = offscreenCanvasCtx.isPointInStroke(50, 10); 180 181 var bitmap = offscreen.transferToImageBitmap(); 182 canvas.transferFromImageBitmap(bitmap); 183 } 184 } 185 ``` 186 187 188- resetTransform示例 189 190  191 192 ``` 193 var canvas = this.$refs.canvas.getContext('2d'); 194 var offscreen = new OffscreenCanvas(500,500); 195 var offscreenCanvasCtx = offscreen.getContext("2d"); 196 197 offscreenCanvasCtx.transform(1, 0, 1.7, 1, 0, 0); 198 offscreenCanvasCtx.fillStyle = 'gray'; 199 offscreenCanvasCtx.fillRect(40, 40, 50, 20); 200 offscreenCanvasCtx.fillRect(40, 90, 50, 20); 201 202 // Non-skewed rectangles 203 offscreenCanvasCtx.resetTransform(); 204 offscreenCanvasCtx.fillStyle = 'red'; 205 offscreenCanvasCtx.fillRect(40, 40, 50, 20); 206 offscreenCanvasCtx.fillRect(40, 90, 50, 20); 207 208 var bitmap = offscreen.transferToImageBitmap(); 209 canvas.transferFromImageBitmap(bitmap); 210 ``` 211 212 213
