캔버스 API가 선 오류를 그립니다. (큐브 그리기)

Question

벡터 좌표를 사용하여 캔버스 평면에 "큐브"를 그리려는 경우 2 개의 사각형을 그릴 수 있지만 4 개의 행을 변환 함수 내에서 연결할 수는 없습니다. 내가 짐작할 수없는 이유로 일하는 것 같습니다. 어떤 제안이나 도움을 주셔서 감사합니다. 여기 JS 빈 http://jsbin.com/rozelenocu/1/edit?html,js,output

function Vector(x, y){ 
    this.x = x; 
    this.y = y; 
} 

Vector.prototype.plot = function(other){ 
    return new Vector(this.x + other.x, this.y + other.y); 
} 

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



function cube(pos, size, z){ 
    var s1 = square(pos, size); 
    var s2 = square(pos + z, size); 
    translate(s1, s2); 
} 

function square(pos, size){ 

    var shape = []; 

    shape.push(new Vector(pos + size, pos)); 
    shape.push(new Vector(pos + size, pos + size)); 
    shape.push(new Vector(pos, pos + size)); 
    shape.push(new Vector(pos, pos)); 


    ctx.beginPath(); 
    var line = 0; 

    ctx.moveTo(pos, pos); 
    while(line < shape.length) { 
     ctx.lineTo(shape[line].x, shape[line].y); 
     console.log(shape[line].x); 
     line++; 
    } 
    ctx.stroke(); 

    return shape; 
} 

function translate(arr1, arr2) { 
    ctx.beginPath(); 
    arr1.forEach(function(_, i){ 
     console.log(i); 
     ctx.moveTo(arr1[i].x, arr1[i].y); 
     ctx.lineTo(arr2[i].x, arr2[i].y); 
    }); 
    ctx.closePath(); 
} 

cube(50, 20, 10); 

Answer 1

는 문제를 발생 ctx.closepath했다입니다. 나는 그것을 ctx.stroke()로 바 꾸었습니다.