1# OffscreenCanvasRenderingContext2D对象 2 3> **说明：** 4> 从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 5 6 7使用OffscreenCanvasRenderingContext2D在offscreen canvas上进行绘制，绘制对象可以是矩形、文本、图片等 8 9 10## 属性 11 12除支持与CanvasRenderingContext2D对象相同的属性外，还支持如下属性： 13 14| 属性 | 类型 | 描述 | 15| ------ | ------ | ---------------------------------------- | 16| filter | string | 设置图像的滤镜。<br/>支持的滤镜效果如下：<br/>- blur：给图像设置高斯模糊<br/>- brightness：给图片应用一种线性乘法，使其看起来更亮或更暗<br/>- contrast：调整图像的对比度<br/>- drop-shadow：给图像设置一个阴影效果<br/>- grayscale：将图像转换为灰度图像<br/>- hue-rotate：给图像应用色相旋转<br/>- invert：反转输入图像<br/>- opacity：转化图像的透明程度<br/>- saturate：转换图像饱和度<br/>- sepia：将图像转换为深褐色 | 17 18**示例：** 19```html 20<!-- xxx.hml --> 21<div style="width: 500px; height: 500px;"> 22 <canvas ref="canvasId" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas> 23</div> 24``` 25 26```js 27// xxx.js 28export default { 29 onShow(){ 30 var ctx = this.$refs.canvasId.getContext('2d'); 31 var offscreen = new OffscreenCanvas(360, 500); 32 var offCanvas2 = offscreen.getContext("2d"); 33 var img = new Image(); 34 img.src = 'common/images/flower.jpg'; 35 offCanvas2.drawImage(img, 0, 0, 100, 100); 36 offCanvas2.filter = 'blur(5px)'; 37 offCanvas2.drawImage(img, 100, 0, 100, 100); 38 39 offCanvas2.filter = 'grayscale(50%)'; 40 offCanvas2.drawImage(img, 200, 0, 100, 100); 41 42 offCanvas2.filter = 'hue-rotate(90deg)'; 43 offCanvas2.drawImage(img, 0, 100, 100, 100); 44 45 offCanvas2.filter = 'invert(100%)'; 46 offCanvas2.drawImage(img, 100, 100, 100, 100); 47 48 offCanvas2.filter = 'drop-shadow(8px 8px 10px green)'; 49 offCanvas2.drawImage(img, 200, 100, 100, 100); 50 51 offCanvas2.filter = 'brightness(0.4)'; 52 offCanvas2.drawImage(img, 0, 200, 100, 100); 53 54 offCanvas2.filter = 'opacity(25%)'; 55 offCanvas2.drawImage(img, 100, 200, 100, 100); 56 57 offCanvas2.filter = 'saturate(30%)'; 58 offCanvas2.drawImage(img, 200, 200, 100, 100); 59 60 offCanvas2.filter = 'sepia(60%)'; 61 offCanvas2.drawImage(img, 0, 300, 100, 100); 62 63 offCanvas2.filter = 'contrast(200%)'; 64 offCanvas2.drawImage(img, 100, 300, 100, 100); 65 var bitmap = offscreen.transferToImageBitmap(); 66 ctx.transferFromImageBitmap(bitmap); 67 } 68} 69``` 70 71## 方法 72 73除支持与CanvasRenderingContext2D对象相同的方法外，还支持如下方法： 74 75 76### isPointInPath 77 78isPointInPath(path?: Path2D, x: number, y: number): boolean 79 80判断指定点是否在路径的区域内。 81 82**参数：** 83| 参数名 | 参数类型 | 必填 | 描述 | 84| ---- | ------ | ---- | ----------------------------- | 85| path | Path2D | 否 | 可选对象，指定用来判断的路径。若没有设置，则使用当前路径。 | 86| x | number | 是 | 待判断点的x轴坐标。 | 87| y | number | 是 | 待判断点的y轴坐标。 | 88 89**返回值：** 90| 类型 | 说明 | 91| ------- | ------------- | 92| boolean | 指定点是否在路径的区域内。 | 93 94**示例：** 95```html 96<!-- xxx.hml --> 97<div class="container" style="width: 500px; height: 500px;"> 98 <text class="textsize">In path:{{textValue}}</text> 99 <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas> 100</div> 101``` 102 103```css 104/* xxx.css */ 105.container { 106 display: flex; 107 flex-direction: column; 108 background-color: #F1F3F5; 109 align-items: center; 110 justify-content: center; 111 width: 100%; 112 height: 100%; 113} 114 115canvas { 116 width: 600px; 117 height: 600px; 118 background-color: #fdfdfd; 119 border: none; 120} 121 122.textsize { 123 font-size: 40px; 124} 125``` 126 127```js 128// xxx.js 129export default { 130 data: { 131 textValue: 0 132 }, 133 onShow(){ 134 var canvas = this.$refs.canvas.getContext('2d'); 135 var offscreen = new OffscreenCanvas(500,500); 136 var offscreenCanvasCtx = offscreen.getContext("2d"); 137 138 offscreenCanvasCtx.rect(10, 10, 100, 100); 139 offscreenCanvasCtx.fill(); 140 this.textValue = offscreenCanvasCtx.isPointInPath(30, 70); 141 142 var bitmap = offscreen.transferToImageBitmap(); 143 canvas.transferFromImageBitmap(bitmap); 144 } 145} 146``` 147 148 149 150### isPointInStroke 151 152isPointInStroke(path?: Path2D, x: number, y: number): boolean 153 154判断指定点是否在路径的边缘线上。 155 156**参数：** 157| 参数名 | 参数类型 | 必填 | 描述 | 158| ---- | ------ | ---- | ----------------------------- | 159| path | Path2D | 否 | 可选对象，指定用来判断的路径。若没有设置，则使用当前路径。 | 160| x | number | 是 | 待判断点的x轴坐标。 | 161| y | number | 是 | 待判断点的y轴坐标。 | 162 163**返回值：** 164| 类型 | 说明 | 165| ------- | ------------- | 166| boolean | 指定点是否在路径的区域内。 | 167 168**示例：** 169```html 170<!-- xxx.hml --> 171<div class="container" style="width: 500px; height: 500px;"> 172 <text class="textsize">In stroke:{{textValue}}</text> 173 <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas> 174</div> 175``` 176 177```css 178/* xxx.css */ 179.container { 180 display: flex; 181 flex-direction: column; 182 background-color: #F1F3F5; 183 align-items: center; 184 justify-content: center; 185 width: 100%; 186 height: 100%; 187} 188 189canvas { 190 width: 600px; 191 height: 600px; 192 background-color: #fdfdfd; 193 border: none; 194} 195 196.textsize { 197 font-size: 40px; 198} 199``` 200 201```js 202// xxx.js 203export default { 204 data: { 205 textValue: 0 206 }, 207 onShow(){ 208 var canvas = this.$refs.canvas.getContext('2d'); 209 var offscreen = new OffscreenCanvas(500,500); 210 var offscreenCanvasCtx = offscreen.getContext("2d"); 211 212 offscreenCanvasCtx.rect(10, 10, 100, 100); 213 offscreenCanvasCtx.stroke(); 214 this.textValue = offscreenCanvasCtx.isPointInStroke(50, 10); 215 216 var bitmap = offscreen.transferToImageBitmap(); 217 canvas.transferFromImageBitmap(bitmap); 218 } 219} 220``` 221 222 223 224### resetTransform 225 226resetTransform(): void 227 228**示例：** 229```html 230<!-- xxx.hml --> 231<div class="container" style="width: 500px; height: 500px;"> 232 <text class="textsize">In path:{{textValue}}</text> 233 <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas> 234</div> 235``` 236 237```css 238/* xxx.css */ 239.container { 240 display: flex; 241 flex-direction: column; 242 background-color: #F1F3F5; 243 align-items: center; 244 justify-content: center; 245 width: 100%; 246 height: 100%; 247} 248 249canvas { 250 width: 600px; 251 height: 600px; 252 background-color: #fdfdfd; 253 border: none; 254} 255 256.textsize { 257 font-size: 40px; 258} 259``` 260 261```js 262// xxx.js 263export default { 264 data:{ 265 textValue:0 266 }, 267 onShow(){ 268 var canvas = this.$refs.canvas.getContext('2d'); 269 var offscreen = new OffscreenCanvas(500,500); 270 var offscreenCanvasCtx = offscreen.getContext("2d"); 271 272 offscreenCanvasCtx.transform(1, 0, 1.7, 1, 0, 0); 273 offscreenCanvasCtx.fillStyle = '#a9a9a9'; 274 offscreenCanvasCtx.fillRect(40, 40, 50, 20); 275 offscreenCanvasCtx.fillRect(40, 90, 50, 20); 276 277 // Non-skewed rectangles 278 offscreenCanvasCtx.resetTransform(); 279 offscreenCanvasCtx.fillStyle = '#ff0000'; 280 offscreenCanvasCtx.fillRect(40, 40, 50, 20); 281 offscreenCanvasCtx.fillRect(40, 90, 50, 20); 282 283 var bitmap = offscreen.transferToImageBitmap(); 284 canvas.transferFromImageBitmap(bitmap); 285 } 286} 287``` 288 289
