1

我已经开始学习如何使用画布两天了，我在这里......卡住了！

我想创建一个算法来绘制一棵“树”，从底部开始向上扩展。

这是我的代码：

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 和一个带有它的代码笔：http: //codepen.io/anon/pen/facmg

正如您所看到的，第一行创建得很好，但是......我不明白为什么“平”线在“生命周期”属性变为 0 后不会保持绘制状态。

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

非常感谢。干杯。

4

2 回答 2

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，但它将先前创建的“平”线的结束点设置为与其原点相同，这使其不可见。

如果您删除所有线条保持可见，但我不知道您希望它们如何准确显示。

一般来说，var p = lineObject在 javascript 中创建一个对 lineObject的新引用，而不是它的副本；因此，您对 所做的更改p也会对 进行line。您可能需要重新考虑整个程序设计，因为线条链接到它们的“祖先”的方式似乎正在引起问题。

于 2013-08-04T10:56:41.747 回答
0

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

  ...
  // 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);应该这样做。

于 2013-08-04T10:29:26.257 回答