html5 c set ctx,HTML canvas setTransform() 方法

在线示例

绘制一个矩形，使用setTransform()重置并创建一个新的变换矩阵，再次绘制该矩形，重置并创建一个新的变换矩阵，然后再次绘制该矩形。请注意，每次调用setTransform()时，它将重置先前的转换矩阵，然后构建新的矩阵，因此在下面的示例中，未显示红色矩形，因为它位于蓝色矩形下面：您的浏览器,不支持HTML5 canvas标签.

示例html>

HTML canvas setTransform()方法使用-基础教程(nhooo.com)

您的浏览器不支持 HTML5 canvas 标签。

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.fillStyle="yellow";

ctx.fillRect(0,0,250,100)

ctx.setTransform(1,0.5,-0.5,1,30,10);

ctx.fillStyle="red";

ctx.fillRect(0,0,250,100);

ctx.setTransform(1,0.5,-0.5,1,30,10);

ctx.fillStyle="blue";

ctx.fillRect(0,0,250,100);

测试看看 ‹/›

浏览器兼容性

IEFirefoxOperaChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 setTransform()

方法。

注意：Internet Explorer 8 及之前的版本不支持 元素。

定义和用法

画布上的每个对象都有一个当前的转换矩阵。

setTransform() 方法将当前转换重置为单位矩阵，然后 使用相同的参数运行 transform()。

换句话说，setTransform() 允许您缩放、旋转、移动并倾斜当前的环境。

注意：该变换只会影响 setTransform() 方法调用之后的绘图。JavaScript 语法：context.setTransform(a,b,c,d,e,f);

参数值参数描述

a水平缩放绘图。

b水平倾斜绘图。

c垂直倾斜绘图。

d垂直缩放绘图。

e水平移动绘图。

f垂直移动绘图。HTML canvas 参考手册