HTML5 Canvas bezier curves - 배경을로드하고 싶지 않습니다.

Question

스크립트를 도와 줄 사람이 있습니까? jsfiddle.net/7QmSz/3을 참조하십시오.

HTML :

는

<canvas id="canvas" height="1000" width="1000" class="bezier" style="cursor: default;"></canvas> 

CSS :

는

#canvas 
{ 
    position: absolute; 
    left: 100px; 
    top: 100px; 
    background-color: rgba(255, 255, 255, 0.1); 
} 

자바 스크립트 : 먼저 페이지를로드하거나 브라우저를 새로 고칠 때

는

(function() { 
    var canvas; 
    var ctx; 
    var code; 
    var point; 
    var style; 
    var drag = null; 
    var dPoint; 

    function Init(quadratic) { 
     point = { 
      p1: { x:50, y:100 }, 
      p2: { x:200, y:100 }, 
      p3: { x:50 , y:100 }, 
      p4: { x:200 , y:100 } 
     }; 

     if (quadratic) { 
      point.cp1 = { x: 50, y: 50 }; 
      point.cp3 = { x: 250, y: -110 }; 
     } 
     else { 
      point.cp1 = { x: 50, y: 10 }; 
      point.cp2 = { x: 200, y: 10 }; 
      point.cp3 = { x: 50, y: 190 }; 
      point.cp4 = { x: 200, y: 190 }; 
     } 

     style = { 
      curve: { width: 2, color: "#C0C0C0" }, 
      cpline: { width: 1, color: "#C0C0C0" }, 
      point: { radius: 3, width: 1, color: "#C0C0C0", fill: "rgba(200,200,200,0.5)", arc1: 0, arc2: 2 * Math.PI }, 
     } 

     ctx.lineCap = "round"; 
     ctx.lineJoin = "round"; 

     canvas.onmousedown = DragStart; 
     canvas.onmousemove = Dragging; 
     canvas.onmouseup = canvas.onmouseout = DragEnd; 

     DrawCanvas(); 
    } 

    function DrawCanvas() { 
     ctx.clearRect(0, 0, canvas.width, canvas.height); 

     ctx.lineWidth = style.cpline.width; 
     ctx.strokeStyle = style.cpline.color; 
     ctx.beginPath(); 
     ctx.moveTo(point.p1.x, point.p1.y); 
     ctx.lineTo(point.cp1.x, point.cp1.y); 
     if (point.cp2) { 
      ctx.moveTo(point.p2.x, point.p2.y); 
      ctx.lineTo(point.cp2.x, point.cp2.y); 
     } 
     else { 
      ctx.lineTo(point.p2.x, point.p2.y); 
     } 
     ctx.stroke(); 

     ctx.lineWidth = style.cpline.width; 
     ctx.strokeStyle = style.cpline.color; 
     ctx.beginPath(); 
     ctx.moveTo(point.p3.x, point.p3.y); 
     ctx.lineTo(point.cp3.x, point.cp3.y); 
     if (point.cp2) { 
      ctx.moveTo(point.p4.x, point.p4.y); 
      ctx.lineTo(point.cp4.x, point.cp4.y); 
     } 
     else { 
      ctx.lineTo(point.p4.x, point.p4.y); 
     } 
     ctx.stroke(); 

     ctx.lineWidth = style.curve.width; 
     ctx.strokeStyle = style.curve.color; 
     ctx.beginPath(); 
     ctx.moveTo(point.p1.x, point.p1.y); 
     if (point.cp2) { 
      ctx.bezierCurveTo(point.cp1.x, point.cp1.y, point.cp2.x, point.cp2.y, point.p2.x, point.p2.y); 
     } 
     else { 
      ctx.quadraticCurveTo(point.cp1.x, point.cp1.y, point.p2.x, point.p2.y); 
     } 
     var img = new Image(); 
     img.src = 'http://img201.imageshack.us/img201/5708/eyeq.jpg'; 
     var pattern = ctx.createPattern(img, 'repeat') 
     ctx.globalAlpha = "1"; 
     ctx.fillStyle = pattern; 
     ctx.fill(); 
     ctx.stroke(); 

     ctx.lineWidth = style.curve.width; 
     ctx.strokeStyle = style.curve.color; 
     ctx.beginPath(); 
     ctx.moveTo(point.p3.x, point.p3.y); 
     if (point.cp3) { 
      ctx.bezierCurveTo(point.cp3.x, point.cp3.y, point.cp4.x, point.cp4.y, point.p4.x, point.p4.y); 
     } 
     else { 
      ctx.quadraticCurveTo(point.cp3.x, point.cp3.y, point.p4.x, point.p4.y); 
     } 
     var img = new Image(); 
     img.src = 'http://img201.imageshack.us/img201/5708/eyeq.jpg'; 
     var pattern = ctx.createPattern(img, 'repeat') 
     ctx.globalAlpha = "1"; 
     ctx.fillStyle = pattern; 
     ctx.fill(); 
     ctx.stroke(); 

     for (var p in point) { 
      if(p == 'cp1' || p == 'cp2' || p == 'cp3' || p == 'cp4') 
      { 
       ctx.lineWidth = style.point.width; 
       ctx.strokeStyle = style.point.color; 
       ctx.fillStyle = style.point.fill; 
       ctx.beginPath(); 
       ctx.arc(point[p].x, point[p].y, style.point.radius, style.point.arc1, style.point.arc2, true); 
       ctx.fill(); 
       ctx.stroke(); 
      } 
      else 
      { 
       ctx.lineWidth = style.point.width; 
       ctx.strokeStyle = style.point.color; 
       ctx.fillStyle = style.point.fill; 
       ctx.beginPath(); 
       ctx.rect(point[p].x - 4, point[p].y - 4, 7, 7); 
       ctx.fill(); 
       ctx.stroke(); 
      } 
     } 
    } 

    function DragStart(e) { 
     e = MousePos(e); 
     var dx, dy; 
     for (var p in point) { 
      dx = point[p].x - e.x; 
      dy = point[p].y - e.y; 
      if ((dx * dx) + (dy * dy) < style.point.radius * style.point.radius) { 
       if(p == 'cp1' || p == 'cp2' || p == 'cp3' || p == 'cp4') 
       { 
        drag = p; 
        dPoint = e; 
        canvas.style.cursor = "move"; 
       } 
       return; 
      } 
     } 
    } 

    function Dragging(e) { 
     if (drag) { 
      e = MousePos(e); 
      point[drag].x += e.x - dPoint.x; 
      point[drag].y += e.y - dPoint.y; 
      dPoint = e; 
      DrawCanvas(); 
     } 
    } 

    function DragEnd(e) { 
     drag = null; 
     canvas.style.cursor = "default"; 
     DrawCanvas(); 
    } 

    function MousePos(event) { 
     event = (event ? event : window.event); 
     return { 
      x: event.pageX - canvas.offsetLeft, 
      y: event.pageY - canvas.offsetTop 
     } 
    } 

    canvas = document.getElementById("canvas"); 
    if (canvas.getContext) { 
     ctx = canvas.getContext("2d"); 
     Init(canvas.className == "quadratic"); 
    } 
})(); 

문제는 스크립트가하지 않는 것을 배경 이미지를로드하십시오. 대신 기본 배경이 표시됩니다. 나는 그 문제가 뭔지 모른다.

Answer 1

이미지 다운로드가 완료 될 때까지 기다리지 않으므로 이미지를 아직 사용할 수없는 동안에는 캔버스가 나머지 코드를 실행합니다. 캔버스 이전에 이미지 src와 함께 <img> 요소를로드하거나 먼저 이미지()를 만들고 onload 핸들러를 지정한 다음 캔버스의 코드를 호출하는 onload 핸들러로 src 속성을 설정하여로드를 강제 실행하십시오 .