0

Задача состоит в том, чтобы элемент вращался следующим образом http://joxi.ru/1A5z6gdunxgNgr . Делал на canvas. Но получалось сделать или вращение вокруг оси, или rotate. Но не одновременные действия.

1
  • что значит вращение вокруг оси ?? вокруг какой оси ? 2 мерное же пространство
    – ampawd
    4 сен 2017 в 17:59

3 ответа 3

2

вобщем пока вы определяетесь как должно поворачиваться изображение, вот вариант с поворотом вокруг центра

(function() {

let cnv = document.getElementById("cnv");
let ctx = cnv.getContext("2d");
let id = 0;
let w = 50, h = 50;
let x = 0, y = 0;
let theta = 0, phi = 0;
let r = cnv.width/3;
let image = document.getElementById('source');

function init() {
  cnv.width = window.innerWidth;
  cnv.height = window.innerHeight;
  ctx.fillStyle = "#33eeaa";
}

function rect(angle, x, y) {
  ctx.save();
  ctx.translate(x+w*0.5, y+h*0.5);
  ctx.rotate(angle);
  ctx.translate(-x-w*0.5, -y-h*0.5);    
  ctx.drawImage(image, x, y, w, h);
  ctx.restore();
}

function render() {
  ctx.clearRect(0, 0, cnv.width, cnv.height);      
  rect(theta, x, y);      
  x = r*Math.cos(phi) + cnv.width*0.5;
  y = r*Math.sin(phi) + cnv.height*0.5;      
  theta += 0.08;
  phi += 0.01;        
  id = requestAnimationFrame(render);
}

init();
render();

})()
<canvas id="cnv"></canvas>
<div style="display:none;">
  <img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg"
       width="300" height="227">
</div>

2

Как-то так! Определяем для каждой буквы фразы точку из которой эту букву надо начать отрисовывать. И угол на который её надо будет повернуть. Ну, и потом просто рисуем в цикле. Смещаем на некий угол, затираем всё и рисуем с нуля.

let ctx = c.getContext("2d");
let circle = {x: 100, y: 100, r: 70};
let phrase = ["O", "f", "f", "e", "r"];

let a = 0,
    step = 3,
    additionalRadius = 20,
    spaceAngle = 10;

ctx.font = "19px Verdana";

let drawSymbol = (symbol, angle) => {
  let x = Math.round(circle.x + Math.cos(Math.rad(angle)) * (circle.r + additionalRadius)),
      y = Math.round(circle.y - Math.sin(Math.rad(angle)) * (circle.r + additionalRadius));
  
  ctx.save();
  
  ctx.translate(x, y);
  ctx.rotate(-Math.rad(angle + 90));
  
  ctx.fillText(symbol, 0, 0);
  
  ctx.restore();
};

setInterval(() => {
  ctx.clearRect(0, 0, 200, 200);
  
  ctx.beginPath();
  ctx.arc(circle.x, circle.y, circle.r, 0, 2*Math.PI);
  ctx.stroke();
  
  a = (a + step) % 360;
  
  for (let i = 0; i < phrase.length; i++) {
    drawSymbol(phrase[i], a + i * spaceAngle);
  }
}, 100);

Math.rad = function(deg) {
  return deg * Math.PI / 180;
};
Math.deg = function(rad) {
  return rad * 180 / Math.PI;
};
<canvas id=c width=200 height=200></canvas>

1

Что-то на подобии этого:

o.onclick = function() {
  rotate.style.transform = 'rotate(2160deg)'
  bigrotate.style.transform = 'rotate(-360deg)'
}
#rotate {
  height: 50px;
  width: 50px;
  background-color: #fff;
  border-top: 1px solid;
  border-radius: 50%;
  text-align: center;
  line-height: 3;
  transition: all ease 5s;
}

#bigrotate {
  margin: 100px;
  height: 200px;
  width: 200px;
  transition: all ease 10s;
}
<div id="bigrotate">
  <div id="rotate">X</div>
</div>
<button id="o">pres for action</button>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.