MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

CanvasRenderingContext2D.currentTransform

这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀.由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变.

CanvasRenderingContext2D.currentTransform 属性,表示当前变换的矩阵。可以通过Canvas2D API 返回或者赋值为SVGMatrix对象。

语法

ctx.currentTransform [= value];
参考
SVGMatrix 对象表示当前变换的矩阵。

示例

使用currentTransform 的方式

这是一段简单的代码片段,使用currentTransform属性设置变换矩阵。

HTML

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

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var 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);

修改下面的代码并在线查看canvas的变化(确定使用支持这段代码特征的浏览器,可以查看兼容性列表):

规范描述

Specification Status Comment
WHATWG HTML Living Standard
CanvasRenderingContext2D.currentTransform
Living Standard  

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) [1] 未实现
bug 928150
未实现 未实现 未实现
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 未实现 未实现 未实现 未实现 未实现 未实现

Chrome-specific注解

  • 此特征默认无效。需要启用ExperimentalCanvasFeatures 标志进行测试。

参见

文档标签和贡献者

 此页面的贡献者: ice-i-snow
 最后编辑者: ice-i-snow,