HTML5画布转换矩阵 [英] HTML5 Canvas Transformation Matrix

问题描述

我不明白转换矩阵是什么，以及如何使用它。

I don't understand what the Transformation Matrix is and how to work with it.

以下将在我的画布的0,0处绘制一个圆： em>（从使用svg2canvas.jar转换的svg生成）

The following will draw a circle at 0, 0 of my canvas: (generated from an svg converted with svg2canvas.jar)

drawPoints: function(ctx, max_points)
        {
            ctx.save();

            ctx.setTransform(1, 0, 0, 1, -551.23701, -368.42499);

            ctx.fillStyle="#0066ab";
            ctx.globalAlpha="0.7";
            ctx.beginPath();
            ctx.moveTo(584.50,387.96);
            ctx.bezierCurveTo(584.50,397.14,577.05,404.59,567.87,404.59);
            ctx.bezierCurveTo(558.68,404.59,551.24,397.14,551.24,387.96);
            ctx.bezierCurveTo(551.24,378.77,558.68,371.33,567.87,371.33);
            ctx.bezierCurveTo(577.05,371.33,584.50,378.77,584.50,387.96);
            ctx.closePath();
            ctx.fill();

            ctx.restore();
        }

我想传递参数setTransform

I would like to pass in arguments for setTransform() to draw on any part of my canvas, however I don't understand how to use it at all.

推荐答案

它们所指的转换矩阵是在线性代数中找到的公共变换矩阵。这些参数形成您希望应用于给定形状或路径的坐标的变换矩阵。此页面描述了变换方法。请特别看看他们在方法签名下定义的矩阵进行变换。它显示哪些参数转到转换矩阵中的哪里。现在，请参阅以下链接。如果向下滚动，您将看到转换矩阵中的每个元素的含义。例如，变换矩阵的[0,0]元素（来自HTML5变换方法签名的参数a）表示坐标将如何在X方向上缩放。希望这有帮助，

The transformation matrix they are referring to is the common transformation matrix found in linear algebra. Those arguments form the transformation matrix you wish to apply to your coordinates for the given shapes or paths. This page describes the transformation method. Please look specifically at the matrix they define under the method signature for transformation. It shows you which parameters go where in transformation matrix. Now please also refer to the following link. If you scroll down you will see what each element in the transformation matrix means. For instance the [0,0] element (parameter a from the HTML5 transform method signature) of the transformation matrix represents how the coordinate will scale in the X direction. Hope this helps,

这篇关于HTML5画布转换矩阵的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！