根据 x 和 y 轴执行转换

Question

我正在开发一个绘图应用程序，用户可以通过单击按钮绘制最多 9 条边的多边形，然后对绘制的形状执行转换，但我无法将转换正确映射到 x 和 y轴（取决于用户选择的轴）。这是我的旋转功能代码：

function rotate()
{
    polygonSides = document.getElementById("polygonSide").value;
    var coordinates = [],
    radius = Math.sqrt(Math.pow((50), 2) + Math.pow((50), 2)),
    index = 0;
    var angle = 0 * (Math.PI / 180);

    for (index = 0; index < polygonSides; index++) {
        coordinates.push({x: -200 + radius * Math.cos(angle), y: -100 - radius * Math.sin(angle)});
        angle += (2 * Math.PI) / polygonSides;
    }

    var rad = prompt("Enter angle in radians: ","");
    var rad = prompt("Enter x or y axis: ","x or y"); //how to use this to map?

    context.translate(canvas.width / 5, canvas.height / 5); //not working with value 2


    context.rotate(Math.PI / rad);

    context.beginPath();
    context.moveTo(coordinates[0].x, coordinates[0].y);
    for (index = 1; index < polygonSides; index++) {
        context.lineTo(coordinates[index].x, coordinates[index].y);
    }

    context.closePath();
    context.stroke();
    context.strokeStyle = strokeColor.value;

}

轴在 canvas 的中心为 (0,0)。当我用弧度 4 旋转时，我得到这个作为输出：

我如何修改我的代码以适应基于 x 或 y 轴的旋转？

Answer 1

您可以使用jQuery申请css。例子

var $canvas = $("#bkgimg");
rotate(45);

    function rotate(degree) {
  // For webkit browsers: e.g. Chrome
       $canvas.css({ WebkitTransform: 'rotateX(' + degree + 'deg)'});
  // For Mozilla browser: e.g. Firefox
       $canvas.css({ '-moz-transform': 'rotateX(' + degree + 'deg)'});
    }

Answer 2

你可以使用

div {
    -ms-transform: rotate(7deg); /* IE 9 */
    -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
    transform: rotate(7deg);
}

如果您正在使用 css3 那么您可以使用 translateX 和 translateY

根据 x 和 y 轴执行转换

Perform transformations according to x and y axis

html

javascript

html5-canvas