Я пытаюсь получить ручку поворота в холсте, и я не нашел ответа на вопрос.HTML 5 Холст. Как вращать (удерживать вращение) только один объект (из> 1)?
Один квадрат должен оставаться неподвижным. Другой квадрат для поворота в заданной точке. Я могу либо заставить весь холст вращаться в этой точке, либо ни в коем случае. Но я не могу заставить один квадрат быть статичным, а другой - вращаться.
Пожалуйста, просмотрите мое codepen демо здесь: http://codepen.io/richardk70/pen/EZWMXx
В JavaScript:
HEIGHT = 400;
WIDTH = 400;
function draw(){
var ctx = document.getElementById("canvas").getContext('2d');
ctx.clearRect(0,0,WIDTH,HEIGHT);
// draw black square
ctx.save();
ctx.fillStyle = "black";
ctx.beginPath();
ctx.fillRect(75,75,100,100);
ctx.closePath();
ctx.restore();
// attempt to rotate small, maroon square only
ctx.save();
ctx.translate(225,225);
// small maroon square
ctx.fillStyle = "maroon";
ctx.beginPath();
ctx.fillRect(-25,-25,50,50);
ctx.closePath();
ctx.rotate(.1);
ctx.translate(-225,-225);
// comment out below line to spin
// ctx.restore();
window.requestAnimationFrame(draw);
}
window.requestAnimationFrame(draw);
Я знаю, что я мог сделать слоистые холсты, но, конечно, это может быть сделано только в одном слое холста? Разве часы в этом уроке (https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations) не делают именно это?
Спасибо за любую помощь.
Если посмотреть на примере Вы связываетесь, он регулирует количество вращения в зависимости от текущего времени, так что каждый вызов отрисовки немного смещает планеты. Вы пытаетесь скопировать ротацию в контексте, и это не так, как это работает. – DrC