코드는 JSfiddle에서 작동하지만 로컬 호스트에서는 작동하지 않습니다.

클릭하여 배율을 조절할 수있는 라이브 렌더링 상자를 만들려고합니다. 나는이 예를 들어,코드는 JSfiddle에서 작동하지만 로컬 호스트에서는 작동하지 않습니다.

을 발견하지만 로컬로 실행하면 아무것도 표시되지 않습니다. CSS 스타일링과 관련이 있다고 생각합니다. JS 변수 CSS 스타일 지정을 허용하지 않는다고 생각했습니다.

.rectangle { 
border: 1px solid #FF0000; 
position: absolute; 
}

올바르게 색인 파일에 javascript 및 css 파일을 추가했는지 확인했습니다. 로컬 컴퓨터에서

출처

2017-02-02 nathphan

나는 그 피들에 빈 캔버스를 얻습니다. –

브라우저 콘솔을 확인하고 거기에 표시되는 오류 메시지를 게시하십시오. –

@ScottMarcus 클릭 후 드래그해야합니다. 그것은 캔버스입니다 –

, 캔버스 객체를로드하기 전에 onMouseover와 이벤트를 설정하려고하기 때문에 당신은 예외를 얻고있다 <div id="canvas"></div>

<html> 
<head> 
<style> 
#canvas { 
    width:2000px; 
    height:2000px; 
    border: 10px solid transparent; 
} 
.rectangle { 
    border: 1px solid #FF0000; 
    position: absolute; 
} 
</style> 
</head> 
<body> 
<div id="canvas"></div> 
<script> 
initDraw(document.getElementById('canvas')); 



function initDraw(canvas) { 
    function setMousePosition(e) { 
     var ev = e || window.event; //Moz || IE 
     if (ev.pageX) { //Moz 
      mouse.x = ev.pageX + window.pageXOffset; 
      mouse.y = ev.pageY + window.pageYOffset; 
     } else if (ev.clientX) { //IE 
      mouse.x = ev.clientX + document.body.scrollLeft; 
      mouse.y = ev.clientY + document.body.scrollTop; 
     } 
    }; 

    var mouse = { 
     x: 0, 
     y: 0, 
     startX: 0, 
     startY: 0 
    }; 
    var element = null; 
    canvas.onmousemove = function (e) { 
     setMousePosition(e); 
     if (element !== null) { 
      element.style.width = Math.abs(mouse.x - mouse.startX) + 'px'; 
      element.style.height = Math.abs(mouse.y - mouse.startY) + 'px'; 
      element.style.left = (mouse.x - mouse.startX < 0) ? mouse.x + 'px' : mouse.startX + 'px'; 
      element.style.top = (mouse.y - mouse.startY < 0) ? mouse.y + 'px' : mouse.startY + 'px'; 
     } 
    } 

    canvas.onclick = function (e) { 
     if (element !== null) { 
      element = null; 
      canvas.style.cursor = "default"; 
      console.log("finsihed."); 
     } else { 
      console.log("begun."); 
      mouse.startX = mouse.x; 
      mouse.startY = mouse.y; 
      element = document.createElement('div'); 
      element.className = 'rectangle' 
      element.style.left = mouse.x + 'px'; 
      element.style.top = mouse.y + 'px'; 
      canvas.appendChild(element) 
      canvas.style.cursor = "crosshair"; 
     } 
    } 
} 
</script> 
</body> 
</html>

후 본문에 스크립트를 작성합니다.

출처

2017-02-02 22:15:35

나에게 당신의 코드는 잘 작동합니다. 그러나 not build canvas-object에 문제가있는 경우 및 my_function() {initDraw (document.getElementById ('canvas'))) 함수를 사용할 수 있습니다. }. 이것은 명확하게 작동합니다. – Sascha

@Sascha 잘 작동합니다. 방금 한 가지 방법을 언급했습니다. 그들은 document.onload와 같은 다른 방법입니다. 감사합니다. –

코드는 JSfiddle에서 작동하지만 로컬 호스트에서는 작동하지 않습니다.

답변

관련 문제