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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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