在此页

• 句法
• 范例
• 浏览器兼容性
• 另请参阅
• 相关话题

这是 实验性技术
检查 浏览器兼容性表格 要小心谨慎在生产中使用这之前。

CanvasRenderingContext2D .currentTransform property of the Canvas 2D API returns or sets a DOMMatrix (current specification) or SVGMatrix (old specification) object for the current transformation matrix.

句法

ctx.currentTransform [= value];
					

value

DOMMatrix or SVGMatrix object to use as the current transformation matrix.

范例

Manually changing the matrix

此范例使用 currentTransform property to set a transformation matrix. A rectangle is then drawn using that transformation.

HTML

<canvas id="canvas"></canvas>
					

JavaScript

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let matrix = ctx.currentTransform;
matrix.a = 1;
matrix.b = 1;
matrix.c = 0;
matrix.d = 1;
matrix.e = 0;
matrix.f = 0;
ctx.currentTransform = matrix;
ctx.fillRect(0, 0, 100, 100);
					

结果

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
currentTransform	Chrome Yes Disabled Yes Disabled Disabled This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.	Edge ≤18	Firefox No 不支持 No 见 bug 928150 . Firefox also supports the experimental and prefixed properties mozCurrentTransform and mozCurrentTransformInverse which set or get the current (inverse) transformation matrix.	IE No	Opera No	Safari No 不支持 No 见 webkitbug(174278) .	WebView Android No	Chrome Android No	Firefox Android No	Opera Android No	Safari iOS No	Samsung Internet Android No
返回 DOMMatrix	Chrome No 不支持 No 见 bug 637940 .	Edge No 不支持 No 见 bug 637940 .	Firefox No	IE No	Opera No	Safari No 不支持 No 见 bug 174278 .	WebView Android No 不支持 No 见 bug 637940 .	Chrome Android No 不支持 No 见 bug 637940 .	Firefox Android No	Opera Android No	Safari iOS No	Samsung Internet Android No 不支持 No 见 bug 637940 .

图例

完整支持

完整支持

不支持

不支持

实验。期望将来行为有所改变。

实验。期望将来行为有所改变。

见实现注意事项。

用户必须明确启用此特征。

用户必须明确启用此特征。

另请参阅

• The interface defining this property: CanvasPattern
• SVGMatrix
• DOMMatrix

元数据

• 最后修改： 2019 年 3 月 23 日

相关话题

1. CanvasRenderingContext2D
2. 特性

   1. canvas
   2. currentTransform
   3. direction
   4. fillStyle
   5. filter
   6. font
   7. globalAlpha
   8. globalCompositeOperation
   9. imageSmoothingEnabled
   10. imageSmoothingQuality
   11. lineCap
   12. lineDashOffset
   13. lineJoin
   14. lineWidth
   15. miterLimit
   16. shadowBlur
   17. shadowColor
   18. shadowOffsetX
   19. shadowOffsetY
   20. strokeStyle
   21. textAlign
   22. textBaseline
3. 方法

   1. addHitRegion()
   2. arc()
   3. arcTo()
   4. beginPath()
   5. bezierCurveTo()
   6. clearHitRegions()
   7. clearRect()
   8. clip()
   9. closePath()
   10. createImageData()
   11. createLinearGradient()
   12. createPattern()
   13. createRadialGradient()
   14. drawFocusIfNeeded()
   15. drawImage()
   16. drawWidgetAsOnScreen()
   17. drawWindow()
   18. ellipse()
   19. fill()
   20. fillRect()
   21. fillText()
   22. getImageData()
   23. getLineDash()
   24. getTransform()
   25. isPointInPath()
   26. isPointInStroke()
   27. lineTo()
   28. measureText()
   29. moveTo()
   30. putImageData()
   31. quadraticCurveTo()
   32. rect()
   33. removeHitRegion()
   34. resetTransform()
   35. restore()
   36. rotate()
   37. save()
   38. scale()
   39. scrollPathIntoView()
   40. setLineDash()
   41. setTransform()
   42. stroke()
   43. strokeRect()
   44. strokeText()
   45. transform()
   46. translate()