Задача состоит в том, чтобы элемент вращался следующим образом http://joxi.ru/1A5z6gdunxgNgr . Делал на canvas. Но получалось сделать или вращение вокруг оси, или rotate. Но не одновременные действия.
3 ответа
вобщем пока вы определяетесь как должно поворачиваться изображение, вот вариант с поворотом вокруг центра
(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>
Как-то так! Определяем для каждой буквы фразы точку из которой эту букву надо начать отрисовывать. И угол на который её надо будет повернуть. Ну, и потом просто рисуем в цикле. Смещаем на некий угол, затираем всё и рисуем с нуля.
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>
Что-то на подобии этого:
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>