HTML5画布基本图形的图形变换

它是HTML5中的一个新标签，用于绘制图形。事实上，这个标签与其他标签相同。它的特点是，标签可以得到canvasrenderingcontext2d对象。我们可以通过Javaｓｃｒｉｐｔ脚本控制对象。

它只是一个绘图容器，除了id、类、样式等属性外，还有高度和宽度属性。主要有三个步骤来绘制：

1。获取与元素对应的DOM对象，这是一个画布对象；
2。getContext（）的画布上的对象的方法调用，并得到canvasrenderingcontext2d对象。
三.调用canvasrenderingcontext2d对象绘制。

图形变换

翻译：context.translate（x，y），接收参数转换为X在X轴方向，并把Y在Y轴方向。

变焦：context.scale（x，y），接收参数x x坐标，和Y轴是Y比例比例。

旋转：context.rotate（角），接收参数的轴旋转的角度。

需要说明的是，改变图后，下一个图是下一个最后的状态，所以如果我们需要回到最初的状态，我们需要使用context.save context.restore（）和（）来保存和恢复当前的状态。

Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。

VaR的画布document.getelementbyid（画布）；
VaR上下文= canvas.getcontext（2D）；

翻译（）
context.save（）；
context.fillstyle =# 1424de ；
context.translate（10,10）；
（00200200）context.fillrect；
context.restore（）；

范围（）
context.save（）；
context.fillstyle =# f5270b ；
context.scale（0.5,0.5）；
（50050200200）context.fillrect；
context.restore（）；
旋转（）

context.save（）；
context.fillstyle =# 18eb0f ；
context.rotate（math.pi / 4）；
（30010200200）context.fillrect；
context.restore（）；

结果如下：

另一个是图形的变换与矩阵变换：context.transform（A，B，C，D，E，F，G）。参数的含义如下：

级别缩放（默认值为1）
B级倾斜（默认值为0）
垂直倾斜（默认值为0）
d垂直缩放（默认值为1）
水平位移（默认值为0）
垂直位移（默认值为0）

读者可以自行验证各种参数的影响，这里没有介绍。

以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。