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）]等上的坐标。

画布旋转 - 固定背景，移动前景

1 个答案: