1# OffscreenCanvasRenderingContext2D对象 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @sd-wu--> 5<!--Designer: @sunbees--> 6<!--Tester: @liuli0427--> 7<!--Adviser: @HelloCrease--> 8 9使用OffscreenCanvas在离屏Canvas画布组件上进行绘制，绘制对象可以是矩形、文本、图片等。 离屏，即GPU在当前缓冲区以外新开辟的一个缓冲区。具体请参考[OffscreenCanvasRenderingContext2D对象](../reference/apis-arkui/arkui-js/js-offscreencanvasrenderingcontext2d.md)。 10 11以下示例创建了一个OffscreenCanvas画布，再在画布上创建一个getContext2d对象，并设置filter属性改变图片样式。 12 13```html 14<!-- xxx.hml --> 15<div class="container"> 16 <canvas ref="canvas1"></canvas> 17 <select @change="change()"> 18 <option value="blur(5px)">blur</option> 19 <option value="grayscale(50%)">grayscale</option> 20 <option value="hue-rotate(45deg)">hue-rotate</option> 21 <option value="invert(100%)">invert</option> 22 <option value="drop-shadow(8px 8px 10px green)">drop-shadow</option> 23 <option value="brightness(0.4)">brightness</option> 24 <option value="opacity(0.25)">opacity</option> 25 <option value="saturate(30%)">saturate</option> 26 <option value="sepia(60%)">sepia</option> 27 <option value="contrast(200%)">contrast</option> 28 </select> 29</div> 30``` 31 32```css 33/* xxx.css */ 34.container{ 35 width: 100%; 36 height: 100%; 37 flex-direction: column; 38 justify-content: center; 39 align-items: center; 40 background-color: #F1F3F5; 41} 42canvas{ 43 width: 600px; 44 height: 500px; 45 background-color: #fdfdfd; 46 border: 5px solid red; 47} 48select{ 49 margin-top: 50px; 50 width: 250px; 51 height: 100px; 52 background-color: white; 53} 54``` 55 56```js 57// xxx.js 58import promptAction from '@ohos.promptAction'; 59export default { 60 data:{ 61 el: null, 62 ctx: null, 63 offscreen: null, 64 offCanvas: null, 65 img: null, 66 }, 67 onShow(){ 68 this.ctx = this.$refs.canvas1.getContext("2d"); 69 this.offscreen = new OffscreenCanvas(600, 500); 70 this.offCanvas = this.offscreen.getContext("2d"); 71 this.img = new Image(); 72 // "common/images/2.png"需要替换为开发者所需的图像资源文件 73 this.img.src = 'common/images/2.png'; 74 // 图片成功获取触发方法 75 let _this = this; 76 this.img.onload = function() { 77 _this.offCanvas.drawImage(_this.img, 100, 100, 400, 300); 78 }; 79 this.img.onerror = function() { 80 promptAction.showToast({message:"error",duration:2000}) 81 }; 82 var bitmap = this.offscreen.transferToImageBitmap(); 83 this.ctx.transferFromImageBitmap(bitmap); 84 }, 85 change(e){ 86 this.offCanvas.filter = e.newValue;this.offCanvas.drawImage(this.img, 100, 100, 400, 300); 87 var bitmap = this.offscreen.transferToImageBitmap(); 88 this.ctx.transferFromImageBitmap(bitmap); 89 }, 90} 91``` 92 93 94 95 96 97## 判断位置 98 99使用isPointInPath判断坐标点是否在路径的区域内，使用isPointInStroke判断坐标点是否在路径的边缘线上，并在页面上显示返回结果。 100 101 102```html 103<!-- xxx.hml --> 104<div class="container"> 105 <div class="content"> 106 <text>坐标：{{X}}, {{Y}}</text> 107 <text>In path:{{textValue}}</text> 108 <text>In stroke:{{textValue1}}</text> 109 </div> 110 <canvas ref="canvas"></canvas> 111 <button onclick="change">Add(50)</button> 112</div> 113``` 114 115 116```css 117/* xxx.css */ 118.container{ 119 width: 100%; 120 height: 100%; 121 flex-direction: column; 122 justify-content: center; 123 align-items: center; 124 background-color: #F1F3F5; 125 display: flex; 126} 127canvas{ 128 width: 600px; 129 height: 500px; 130 background-color: #fdfdfd; 131 border: 5px solid red; 132} 133.content{ 134 flex-direction: column; 135 justify-content: center; 136 align-items: center; 137} 138text{ 139 font-size: 30px; 140 width: 300px; 141 height: 80px; 142 text-align: center; 143} 144button{ 145 width: 180px; 146 height: 75px; 147 margin-top: 50px; 148} 149``` 150 151 152```js 153// xxx.js 154export default { 155 data: { 156 textValue: 0, 157 textValue1: 0, 158 X:0, 159 Y:250, 160 }, 161 onShow(){ 162 let canvas = this.$refs.canvas.getContext('2d'); 163 let offscreen = new OffscreenCanvas(500,500); 164 let offscreenCanvasCtx = offscreen.getContext("2d"); 165 let offscreenCanvasCtx1 = offscreen.getContext("2d"); 166 offscreenCanvasCtx1.arc(this.X, this.Y, 2, 0, 6.28); 167 offscreenCanvasCtx.lineWidth=20; 168 offscreenCanvasCtx.rect(200,150, 200, 200); 169 offscreenCanvasCtx.stroke(); 170 this.textValue1 = offscreenCanvasCtx.isPointInStroke(this.X, this.Y)?'true':'false'; 171 this.textValue = offscreenCanvasCtx.isPointInPath(this.X, this.Y)?'true':'false'; 172 let bitmap = offscreen.transferToImageBitmap(); 173 canvas.transferFromImageBitmap(bitmap); 174 }, 175 change(){ 176 if(this.X < 500){ 177 this.X = this.X+50; 178 }else{ 179 this.X = 0; 180 } 181 let canvas = this.$refs.canvas.getContext('2d'); 182 let offscreen = new OffscreenCanvas(500,500); 183 let offscreenCanvasCtx = offscreen.getContext("2d"); 184 let offscreenCanvasCtx1 = offscreen.getContext("2d"); 185 offscreenCanvasCtx1.arc(this.X, this.Y, 1, 0, 6.28) 186 offscreenCanvasCtx.lineWidth=20 187 offscreenCanvasCtx.rect(200,150, 200, 200); 188 offscreenCanvasCtx.stroke(); 189 this.textValue1 = offscreenCanvasCtx.isPointInStroke(this.X, this.Y)?'true':'false'; 190 this.textValue = offscreenCanvasCtx.isPointInPath(this.X, this.Y)?'true':'false'; 191 let bitmap = offscreen.transferToImageBitmap(); 192 canvas.transferFromImageBitmap(bitmap); 193 } 194} 195``` 196 197 198
