html中canvas HTML canvas setTransform() 方法

html中canvas

HTML5 中的 canvas 元素是一个可以使用脚本（通常是JavaScript）来绘制图形的 HTML 元素。它可以用于绘制图形、制作图像动画以及实现游戏开发。

<canvas id="myCanvas" width="200" height="100"></canvas>

上面的代码定义了一个名为 myCanvas 的 canvas 元素，宽度为 200px，高度为 100px。在 canvas 中，你可以使用 JavaScript 来绘制图形，例如圆形、椭圆、直线、多边形和路径。你还可以使用 JavaScript 来添加文本、图像和其他内容。

此外，你还可以使用 canvas 来创建动态效果，例如动态背景、旋转的图片或者其他动态效果。你还可以使用 canvas 来创建复杂的游戏界面，包括 3D 图形、物理引擎和其他复杂的效果。

canvas 元素是 HTML5 中最强大的元素之一，它能够帮助开发者快速创建出各式各样的图形效果。此外，canvas 还能够帮助开发者快速创建出各式各样的动态效果和复杂的游戏界面。

HTML canvas setTransform() 方法

HTML canvas setTransform() 方法

HTML canvas 参考手册

实例

绘制一个矩形，通过 setTransform() 重置并创建新的变换矩阵，再次绘制矩形，重置并创建新的变换矩阵，然后再次绘制矩形。请注意，每当您调用 setTransform() 时，它都会重置前一个变换矩阵然后构建新的矩阵，因此在下面的例子中，不会显示红色矩形，因为它在蓝色矩形下面：

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

---

浏览器支持

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

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

---

定义和用法

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

setTransform() 方法把当前的变换矩阵重置为单位矩阵，然后以相同的参数运行 transform()。

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

注意：该变换只会影响 setTransform() 方法调用之后的绘图。

JavaScript 语法：	context.setTransform(a,b,c,d,e,f);

参数值

参数	描述
a	水平缩放绘图。
b	水平倾斜绘图。
c	垂直倾斜绘图。
d	垂直缩放绘图。
e	水平移动绘图。
f	垂直移动绘图。

---

HTML canvas 参考手册