Как повернуть объект холста, как -Как Поворот холста Контекст
ctx.beginPath();
ctx.fillStyle = 'rgba(52, 52, 53, 0.75)';
ctx.fillRect(50, 50, 100, 100);
Он не должен быть цикл, но как я могу повернуть это?
@M. Ответ на страницу приводит к тому, что это вращается, но не так, как вы, вероятно, думаете. Обычно rotate() - это не о средней точке вашего объекта, а в другом месте (0,0). Чтобы исправить это, нам нужно сделать среднюю точку нашего объекта равной (0,0), затем выполнить поворот, а затем перевести назад. Как так:
ctx.translate((c.width/2) - 50, (c.height/2) - 50); // move back
ctx.rotate(20*Math.PI/180); // rotate
ctx.translate((-c.width/2) + 50, (-c.height/2) + 50); // move to 0,0
ctx.fillRect(50, 50, 100, 100); // Notice the middle point would be (x+50, y+50)
Обратите внимание, что это на самом деле сделано из снизу вверх, который, как стек для работы с графикой.
Here is an example, обратите внимание на разницу, если вы прокомментируете translate().
-50 и +50 происходит от размещения центра нашей коробки посередине. Без них он будет вращаться в нижнем правом углу коробки, а не в центре коробки. Чтобы дать визуальный пример:
В основном мы хотим перевести в положение, где средняя точка нашего бокса находится в (0,0).
Как это:
<html>
<body>
<canvas id="myCanvas" width="134px" height="331px" onclick="draw()"></canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle = 'rgba(52, 52, 53, 0.75)';
ctx.rotate(20*Math.PI/180);
ctx.fillRect(50, 50, 100, 100);
</script>
</body>
</html>
Можете ли вы добавить html, css и javascript? – Alex
Здесь вы идете ... –
Что такое +50 и -50? – Alex
@AlexSafayan, потому что средняя точка нашего окна составляет 50 пикселей от левого угла с обеих сторон. В противном случае он будет вращать его в верхнем левом углу окна. –
@AlexSafayan Я обновил свой ответ, чтобы четко показать это, ссылки имеют два анимированных вращения. –