javascript - Canvas 旋转 - 固定背景，移动前景

Question

目标

背景中的条纹保持固定，而圆锥体绕中心旋转。

当前状态

现场演示:

https://codepen.io/WallyNally/pen/yamGYB

/*
The loop function is around line 79.
Uncomment it to start the animation. 
*/

var c = document.getElementById('canv');
var ctx = c.getContext('2d');

var W = c.width = window.innerWidth; 
var H = c.height = window.innerHeight;


var Line = function() {
    this.ctx = ctx;
  this.startX = 0;
  this.startY = 0;
  this.endX = 0;
  this.endY = 0;
    this.direction = 0;
    this.color = 'blue';

    this.draw = function() {
        this.ctx.beginPath();
    this.ctx.lineWidth = .1;
        this.ctx.strokeStlye = this.color;
        this.ctx.moveTo(this.startX, this.startY);
        this.ctx.lineTo(this.endX, this.endY);
    this.ctx.closePath();
    this.ctx.stroke();
    }

    this.update = function() {
    //for fun 

    if (this.direction == 1) {
      this.ctx.translate(W/2, H/2);
      this.ctx.rotate(-Math.PI/(180));
    }
    }//this.update()
}//Line();

objects=[];

function initLines() {
    for (var i =0; i < 200; i++) {
        var line = new Line();
        line.direction = (i % 2);

    if (line.direction == 0) {
      line.startX = 0;
      line.startY = -H + i * H/100;
      line.endX = W + line.startX;
      line.endY = H + line.startY;
    }
    if (line.direction == 1) {
      line.startX = 0;
      line.startY = H - i * H/100;
      line.endX = W - line.startX;
      line.endY = H - line.startY;
    }
    objects.push(line);
    line.draw();
    }
}

initLines(); 

function render(c) {
  c.clearRect(0, 0, W, H);
  for (var i = 0; i < objects.length; i++) 
    { 
      objects[i].update();
      objects[i].draw();
    }
}

function loop() {
  render(ctx);
  window.requestAnimationFrame(loop);
}

//loop();

我尝试过的

translate(W/2, H/2) 应将上下文放置在页面的中心，然后 this.ctx.rotate(-Math.PI/(180) ) 应该一次旋转一度。这是不起作用的部分。

使用save()和restore()是保持动画的某些部分静态而其他部分移动的正确方法。我将保存和恢复放在代码的不同部分，但无济于事。有两种类型的结果之一:要么生成新的完全静态图像，要么发生一些不稳定的动画(与现在的情况相同)。

Answer 1

这是更改后的笔:http://codepen.io/samcarlinone/pen/LRwqNg

您需要进行一些更改:

var c = document.getElementById('canv');
var ctx = c.getContext('2d');

var W = c.width = window.innerWidth; 
var H = c.height = window.innerHeight;

var angle = 0;

var Line = function() {
    this.ctx = ctx;
    this.startX = 0;
    this.startY = 0;
    this.endX = 0;
    this.endY = 0;
    this.direction = 0;
    this.color = 'blue';

    this.draw = function() {
        this.ctx.beginPath();
    this.ctx.lineWidth = .1;
        this.ctx.strokeStlye = this.color;
        this.ctx.moveTo(this.startX, this.startY);
        this.ctx.lineTo(this.endX, this.endY);
    this.ctx.closePath();
    this.ctx.stroke();
    }

    this.update = function() {
    //for fun 
    if (this.direction == 1) {
      this.ctx.translate(W/2, H/2);
      this.ctx.rotate(angle);
      this.ctx.translate(-W/2, -H/2);
    }
    }//this.update()
}//Line();

objects=[];

function initLines() {
    for (var i =0; i < 200; i++) {
        var line = new Line();
        line.direction = (i % 2);

    if (line.direction == 0) {
      line.startX = 0;
      line.startY = -H + i * H/100;
      line.endX = W + line.startX;
      line.endY = H + line.startY;
    }
    if (line.direction == 1) {
      line.startX = 0;
      line.startY = H - i * H/100;
      line.endX = W - line.startX;
      line.endY = H - line.startY;
    }
    objects.push(line);
    line.draw();
    }
}

initLines(); 

function render(c) {
  c.clearRect(0, 0, W, H);
  for (var i = 0; i < objects.length; i++) 
    { 
      ctx.save();
      objects[i].update();
      objects[i].draw();
      ctx.restore();
    }
}

function loop() {
  render(ctx);
  window.requestAnimationFrame(loop);

  angle += Math.PI/360;
}

loop();

首先，我添加了一个变量来跟踪旋转并在循环中递增它

其次，我为每一行保存和恢复，或者，如果所有行都将执行相同的转换，您可以在绘图循环之前和之后移动该代码

第三，为了获得所需的效果，我进行平移，使中心点位于屏幕中间，然后旋转，使线条旋转，然后平移回来，因为所有线条的坐标都在区间 [0, H ]。不是在绘制之前翻译回来，另一个选择是使用区间 [-(H/2), (H/2)] 等上的坐标。