캔버스 논리 문제

Question

캔버스를 사용하는 법을 배우기 시작했습니다. 2 일이 지난 지금부터 저는 ... 붙어 있습니다!

아래에서 시작하여 위로 확장하여 "트리"를 그리는 고고를 만들고 싶었습니다. '당신이 볼 수 있듯이 http://codepen.io/anon/pen/facmg

은, 첫 번째 줄은 잘 만들어하지만 ... 내가 할 수있는 : 여기

내 코드입니다 :

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 "평생"재산이 0이 된 후에 "평평한"선이 그려지지 않은 이유를 이해하지 못합니다.

누군가 나를 도울 수 있는지 궁금합니다.

고마워요. 건배.

Answer 1

문제는 여기에 당신이 p.endingPoint.x = lines[lines.length-1].origin.x 달성하려는 모르겠어요

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

이지만, 그것의 기원과 동일하게 이전에 생성 된 "플랫"라인의 endingPoint를 설정하는 것, 그것을 보이지 않게합니다.

all of the lines stay visible을 제거하면 정확하게 표시되도록 의도했는지 모르겠지만 자바 스크립트의 var p = lineObject는 lineObject 새 기준을 생성하는 일반적으로 주

아닌 는의 복사; 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); 제거.