Повернуть квадрат вокруг своей оси в HTML5 Canvas? - PullRequest
Новая
       36

Повернуть квадрат вокруг своей оси в HTML5 Canvas?

2 голосов
/ 20 января 2012

Я хочу создать функцию, которая вращает квадрат вокруг своей оси. 

var halfWidth = canvas.width/2;
var halfHeight = canvas.height/2;

var x = halfWidth-10;
var y = halfHeight-10;
var w = 20;
var h = 20;
var deg = 45;

rotate(x, y, w, h, deg);

ctx.fillRect(x, y, w, h);

Функция: 

function rotate(x, y, w, h, deg) {
    // ctx.translate() and ctx.rotate()
    // goes here.
}

Как это сделать?

Ответы [ 3 ]

4 голосов
/ 21 января 2012

Спасибо др.дредель за ссылку. 

var cx = canvas.width/2;
var cy = canvas.height/2;

var x = -10;
var y = -10;
var w = 20;
var h = 20;
var deg = 45;

ctx.save();

ctx.translate(cx, cy);
ctx.rotate(deg * Math.PI/180);

ctx.fillRect(x, y, w, h);

ctx.restore();

Пояснение:

  • ctx.save() сохраняет текущее состояние системы координат.

  • ctx.translate(cx, cy) меняет начало координат на центр холста

  • ctx.rotate(deg * Math.PI/180) поворачивает квадрат на 45 градусов (обратите внимание, что параметр в радианах, а не в градусах)

  • ctx.fillRect( x, y, w, h ) рисует квадрат

  • ctx.restore() восстанавливает последнее состояние системы координат.

JS Fiddle link .

Еще одна ссылка JS Fiddle с ползунком HTML5 .

0 голосов
/ 17 марта 2014

вот мое мнение:

JAVASCRIPT 

var canvas = document.getElementById("myCanvas");
var ctx2 = canvas.getContext("2d");
ctx2.fillStyle='#333';

ctx2.fillRect(50,50,100,100);
var ctx = canvas.getContext("2d");


ctx.fillStyle='red';

var deg = Math.PI/180;

ctx.save();
    ctx.translate(100, 100);
    ctx.rotate(45 * deg);
    ctx.fillRect(-50,-50,100,100);
ctx.restore();

ctx2 - это старая позиция, а ctx - это новая позиция формы.Вы должны перевести форму с теми же координатами x, y в соответствии с тем, где вы хотите расположить свою форму.Затем вы должны ввести значения в ctx.fillRect(x,y,w,h);, оставив x и y в качестве значений -ve (половина высоты и ширины, чтобы держать его по диагонали к холсту, в противном случае изменится, чтобы манипулировать им).и h, w в качестве желаемых значений.

DMEO

0 голосов
/ 20 января 2012

Если я правильно помню, перевод подразумевал что-то вроде первого перевода в центральную точку прямоугольника, затем вращение требуемой суммы, а затем рисование.Или, возможно, сначала повернуть, а затем перевести, я немного ржавый =)

...