Question

我已经开始学习如何使用画布，因为现在我已经......卡住了！

我想创建一个算法，从底部开始绘制“树”，然后扩展。

这是我的代码：

var newX = 0;
var baseTaille = 20;
var lines = [];
var maxLines = 20;
var baseLifeTime = 50;
var timer = 0;

function Point (x,y) {
    this.x = x;
    this.y = y;
}
function Line(origin,direction,taille,ancestor,endingPoint)
{
  this.origin = new Point(origin.x,origin.y);
  this.direction = direction;
  this.taille = taille;
  this.ancestor = ancestor;
  this.endingPoint = new Point(endingPoint.x,endingPoint.y);
  this.lifeTime = taille;
}
var canvas;
var context;
$(document).ready(function () {
    canvas = document.getElementById('canvas');
  context = canvas.getContext('2d');
  $("#canvas").attr("width",$(window).width());
  $("#canvas").attr("height",$(window).height());
  init();

});



function init () {
  window.requestAnimFrame = (function(callback) {
        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
        function(callback) {
          window.setTimeout(callback, 1000 / 60);
        };
      })();
      animate();
}
var directions = {
    'UP' : 1,
    'FLAT' : 0
}

function animate() {

  // update
  if(timer == 0)
  {
      if (lines.length == 0) {
        createLine(directions.UP,null,50);
      }else
      {
        if(lines.length < maxLines)
        {
            //If the previous line is in the "FLAT" direction, create 2 lines UP
            if (lines[lines.length-1].direction == directions.FLAT) {
                var p = lines[lines.length-1];
                p.endingPoint.x = lines[lines.length-1].origin.x;
                createLine(directions.UP,p,10);
                createLine(directions.UP,lines[lines.length-2],15); 
            }

            if (lines[lines.length-1].direction == directions.UP) {
                createLine(directions.FLAT,lines[lines.length-1],100);
            }
        }else
        {

        }
      }
      timer = baseLifeTime;
    }
  // clear
  context.clearRect(0, 0, canvas.width, canvas.height);
  // draw stuff
  for(var l in lines){

    var line = lines[l];
    drawLine(context,line);
  }
  // request new frame
  requestAnimFrame(function() {
    animate();
    timer--;
  });
}

function drawLine (context,line) {
  context.beginPath();
  context.moveTo(line.origin.x, line.origin.y);
    if(line.direction == directions.UP)
    {
        if(line.lifeTime > 0)
        {
            context.lineTo(line.endingPoint.x, line.endingPoint.y+line.lifeTime);
        }
        else
        {
            context.lineTo(line.endingPoint.x, line.endingPoint.y);
        }
    }
    if(line.direction == directions.FLAT)
    {
        if(line.lifeTime > 0)
        {
            context.lineTo(line.endingPoint.x-line.lifeTime, line.endingPoint.y);
        }
        else
        {
            context.lineTo(line.endingPoint.x, line.endingPoint.y);
        }
    }


    //context.globalAlpha = line.lifeTime/baseLifeTime;

    line.lifeTime--;

    context.strokeStyle = '#eee';
    context.stroke();
        //else
    //{
      //lines.splice(l,1);
    //}
}

function createLine (direction,ancestor,taille) {
    //TODO if !ancestor, we create the first "branch" of our tree
    var origin;
    if(ancestor == null)
    {
        origin = {
            'x':($(window).width()/2),
            'y':($(window).height())
        };

        endingPoint = {
            'x':origin.x,
            'y':(origin.y-taille)
        };
        ancestor = null;
    }else
    {
        if (direction == directions.UP){
            origin = ancestor.endingPoint;

            endingPoint = {
                'x':origin.x,
                'y':(origin.y-taille)
            };
        }

        if (direction == directions.FLAT)
        {
            origin = {
                'x':(ancestor.endingPoint.x-(taille/2)),
                'y':ancestor.endingPoint.y
            };

            endingPoint = {
                'x':(origin.x+taille),
                'y':(origin.y)
            };

        }
    }

    //We add the line to the "lines" array;
    lines.push(new Line(origin,direction,taille, ancestor,endingPoint));
}

http://pastebin.com/Xxq99vuC 和它的codepen： http://codepen.io/anon/pen/facmg

正如你所看到的，第一行创造得很好但是...... 我无法理解为什么“平面”线在“生命周期”属性变为0之后不会被绘制。

所以我想知道是否有人可以帮助我。

非常感谢。欢呼声。

Answer 1

问题出在这里

if (lines[lines.length-1].direction == directions.FLAT) {
    var p = lines[lines.length-1];
    p.endingPoint.x = lines[lines.length-1].origin.x;

我不确定你要用p.endingPoint.x = lines[lines.length-1].origin.x实现什么，但是它将先前创建的“flat”行的endingPoint设置为与其原点相同，这使得它不可见。

如果您删除了all of the lines stay visible，但我不知道您打算如何准确显示它们。

一般情况下，javascript中的var p = lineObject会为lineObject创建一个新的引用，而不是 copy ;因此，您对p所做的更改也将发送到line。您可能需要重新考虑整个程序设计，因为线条链接到它们的“祖先”似乎会导致问题。

Answer 2

假设你只想把你画的东西留在画布上：

  ...
  // clear
  context.clearRect(0, 0, canvas.width, canvas.height);  // Remove this
  // draw stuff
  for(var l in lines){
  ...

删除行context.clearRect(0, 0, canvas.width, canvas.height);应该这样做。

画布逻辑问题

2 个答案: