HTML 캔버스가 작동하지 않습니다.

-1

저는 여러 웨이 포인트가 표시된 맵 작업을하고 있습니다. 이제 그들은 태그를 사용하여 시도하는 경로를 보여주기 위해 간단한 스트로크로 연결되어야합니다.HTML 캔버스가 작동하지 않습니다.

캔버스가 설정되어있는 경우 드로잉은 경로를 그리거나 칠하는 위치를 평가하는 자바 스크립트에서 발생합니다. 문제는 캔버스가 표시되지 않지만 스크립트에서 호출 된 모든 함수가 올바르게 작성되고 호출된다는 것입니다.

<body> 
    <div id="controller"> 
     <div id="zeichenfenster"> 
      <span id="maps"></span> 
      <span id="objects"></span> 
      <canvas id="canvas" height="1000px" width="2000px"></canvas> 
     </div> 
    </div> 
</body>

... 여기 자바 스크립트이다 :

는 HTML - 코드는 아래와 같다

function connectDrawables(drawable1, drawable2, id) { 

    connections[id] = "" + drawable1 + "|" + drawable2; 

    var canvas = document.getElementById("canvas"); 
    var ctx = canvas.getContext('2d'); 
    ctx.clearRect(0, 0, 2000, 1000); 
    ctx.lineWidth = 5.0; 
    ctx.lineCap = "round"; 
    ctx.strokeStyle = "#FFFFFF"; 

    for(var k in connections) { 

      var string = connections[k]; 
      var sub = string.split("|"); 

      var element1 = document.getElementById(sub[0]); 
      var element2 = document.getElementById(sub[1]); 

      var x1 = 0.0 + parseFloat((element1.style.marginLeft).replace("px", "")) + 8; 
      var y1 = 0.0 + parseFloat((element1.style.marginTop).replace("px", "")) + 7; 
      var x2 = 0.0 + parseFloat((element2.style.marginLeft).replace("px", "")) + 5; 
      var y2 = 0.0 + parseFloat((element2.style.marginTop).replace("px", "")) + 4;     
      //alert("ID: " + id + "\nElement1: " + drawable1 + " x1: " + x1 + " y1: " + y1 + "\nElement2: " + drawable2 + " x2: " + x2 + " y2: " + y2); 

      ctx.beginPath(); 
      ctx.moveTo(x1, y1); 
      ctx.lineTo(x2, y2); 
      ctx.stroke(); 

    } 

}

drawable1 및 2는 웨이의 ID의 있으며, 연결 결합 배열은, ID 고유 ID입니다.

다른 태그의 "위의"HTML 코드에 캔버스를 놓으면 큰 공백 하나가 있지만 그림이 작동하지 않습니다. 당신의 도움에 대한

감사합니다 :)

출처

2012-04-18 Lord Leicester

어떤 브라우저입니까? –

스트로크 너비> 0이되도록 svg 스타일을 지정 했습니까? – RGB

그것은 swt 브라우저입니다. html 5를 지원하고 캔버스 획은 한 번만 작동합니다. –

대해 "ctx.closePath()"결국 ??

 ctx.beginPath(); 
     ctx.moveTo(x1, y1); 
     ctx.lineTo(x2, y2); 
     ctx.stroke(); 
     ctx.closePath();

출처

2012-04-18 18:24:50 Goldy

ctx.closePath()가 필요하지 않습니다. ctx.stroke()가 열려있는 모든 도면을 닫습니다. –

@LordLeicester 올바르지 않으므로 stroke()가 아무 것도 닫지 않습니다. – Delta

패치를 닫아도 작동하지 않습니다. –

HTML 캔버스가 작동하지 않습니다.

답변

관련 문제