javascript - 移动时将三 Angular 形点对准圆心

Question

我希望三 Angular 形在旋转时始终对准中心

var element = document.getElementById('background');
var ctx = element.getContext("2d");
var camera = {};
camera.x = 0;
camera.y = 0;
var scale = 1.0;
var obj = [];
var t = {};
t.angle = Math.random() * Math.PI * 2; //start angle
t.radius = 200;
t.x = Math.cos(t.angle) * t.radius; // start position x
t.y = Math.sin(t.angle) * t.radius; //start position y
t.duration = 10000; //10 seconds per rotation
t.rotSpeed = 2 * Math.PI / t.duration; // Rotational speed (in radian/ms)
t.start = Date.now();
obj.push(t);

function update() {
  for (var i = 0; i < obj.length; i++) {
    var delta = Date.now() - obj[i].start;
    obj.start = Date.now();
    var angle = obj[i].rotSpeed * delta;
    // The angle is now already in radian, no longer need to convert from degree to radian.
    obj[i].x = obj[i].radius * Math.cos(angle);
    obj[i].y = obj[i].radius * Math.sin(angle);
  }
}

function draw() {
  update();
  ctx.clearRect(0, 0, element.width, element.height);
  ctx.save();
  ctx.translate(0 - (camera.x - element.width / 2), 0 - (camera.y - element.height / 2));
  ctx.scale(scale, scale);
  ctx.fillStyle = 'blue';
  for (var i = 0; i < obj.length; i++) {
    /*Style circle*/
    ctx.beginPath();
    ctx.arc(0, 0, obj[i].radius, 0, Math.PI * 2);
    ctx.lineWidth = 60;
    ctx.strokeStyle = "black";
    ctx.stroke();

    //Dot style
    ctx.beginPath();
    ctx.arc(obj[i].x,obj[i].y,10,0,Math.PI*2);  
    ctx.moveTo(0 + obj[i].x, 0 + obj[i].y);
    ctx.lineTo(75 + obj[i].x, 25 + obj[i].y);
  	ctx.lineTo(75 + obj[i].x, -25 + + obj[i].y);
    ctx.lineWidth = 1.5;
    ctx.strokeStyle = "red";
    ctx.stroke();    
    ctx.fillStyle = "red";
    ctx.fill();  
  }
  ctx.restore();
  requestAnimationFrame(draw);
}

draw();

<canvas id="background" width="500" height="500"></canvas>

这是一个快速的 fiddle ，为了方便起见，它已经包含了所有代码:) https://jsfiddle.net/4xwmo5tj/5/

我已经让它旋转了(这个点现在在那里，但稍后会被移除，这样就可以忽略了)我唯一还需要做的就是始终将它对准中心。我想我必须为此使用 css transform translate。但我不知道怎么办

Answer 1

Use CSS animations.

.outer-circle {
  height: 200px;
  width: 200px;
  background-color: black;
  padding: 25px;
  position: relative;
  border-radius: 50%;
  -webkit-animation:spin 4s linear infinite;
  -moz-animation:spin 4s linear infinite;
  animation:spin 4s linear infinite;
}

.inner-cricle {
  width: 150px;
  height: 150px;
  background: white;
  margin: auto;
  margin-top: 25px;
  border-radius: 50%;
}

.triangle {
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;  
  border-top: 20px solid #f00;
  position: absolute;
  left: 40%;
  top: 6%;
}


@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

<div class="outer-circle">
  <div class="triangle"></div><div class="inner-cricle"></div>
</div>