# OffscreenCanvasRenderingContext2D对象 - [属性](#zh-cn_topic_0000001180864495_section661391987) - [方法](#zh-cn_topic_0000001180864495_section47669296127) >![](../../public_sys-resources/icon-note.gif) **说明：** >从API Version 7 开始支持。 使用OffscreenCanvasRenderingContext2D在offscreen canvas上进行绘制，绘制对象可以是矩形、文本、图片等 ## 属性 除支持与CanvasRenderingContext2D对象相同的属性外，还支持如下属性：

属性

类型

描述

filter

string

设置图像的滤镜。

支持的滤镜效果如下：

  • blur：给图像设置高斯模糊
  • brightness：给图片应用一种线性乘法，使其看起来更亮或更暗
  • contrast：调整图像的对比度
  • drop-shadow：给图像设置一个阴影效果
  • grayscale：将图像转换为灰度图像
  • hue-rotate：给图像应用色相旋转
  • invert：反转输入图像
  • opacity：转化图像的透明程度
  • saturate：转换图像饱和度
  • sepia：将图像转换为深褐色
- 示例 ``` var ctx = this.$refs.canvasid.getContext('2d'); var offscreen = new OffscreenCanvas(360, 500); var offCanvas2 = offscreen.getContext("2d"); var img = new Image(); img.src = 'common/images/flower.jpg'; offCanvas2.drawImage(img, 0, 0, 100, 100); offCanvas2.filter = 'blur(5px)'; offCanvas2.drawImage(img, 100, 0, 100, 100); offCanvas2.filter = 'grayscale(50%)'; offCanvas2.drawImage(img, 200, 0, 100, 100); offCanvas2.filter = 'hue-rotate(90deg)'; offCanvas2.drawImage(img, 0, 100, 100, 100); offCanvas2.filter = 'invert(100%)'; offCanvas2.drawImage(img, 100, 100, 100, 100); offCanvas2.filter = 'drop-shadow(8px 8px 10px green)'; offCanvas2.drawImage(img, 200, 100, 100, 100); offCanvas2.filter = 'brightness(0.4)'; offCanvas2.drawImage(img, 0, 200, 100, 100); offCanvas2.filter = 'opacity(25%)'; offCanvas2.drawImage(img, 100, 200, 100, 100); offCanvas2.filter = 'saturate(30%)'; offCanvas2.drawImage(img, 200, 200, 100, 100); offCanvas2.filter = 'sepia(60%)'; offCanvas2.drawImage(img, 0, 300, 100, 100); offCanvas2.filter = 'contrast(200%)'; offCanvas2.drawImage(img, 100, 300, 100, 100); var bitmap = offscreen.transferToImageBitmap(); ctx.transferFromImageBitmap(bitmap); ``` ![](figures/zh-cn_image_0000001152773860.png) ## 方法 除支持与CanvasRenderingContext2D对象相同的方法外，还支持如下方法：

名称

参数

描述

isPointInPath

path?: Path2D, x: number, y: number

判断指定点是否在路径的区域内。

path：可选对象，指定用来判断的路径。若没有设置，则使用当前路径

x：待判断点的x轴坐标

y：待判断点的y轴坐标

isPointInStroke

path?: Path2D, x: number, y: number

判断指定点是否在路径的边缘线上。

path：可选对象，指定用来判断的路径。若没有设置，则使用当前路径

x：待判断点的x轴坐标

y：待判断点的y轴坐标

resetTransform

无

将当前变换重置为单位矩阵。
- isPointInPath示例 ![](figures/zh-cn_image_0000001181449919.png) ```
In path:{{textValue}}
``` ``` // 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); } } ``` - isPointInStroke示例 ![](figures/zh-cn_image_0000001181458721.png) ```
In path:{{textValue}}
``` ``` // 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); } } ``` - resetTransform示例 ![](figures/zh-cn_image_0000001135171488.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); ```