Код работает в JSfiddle, но не на локальном хосте

Я пытаюсь создать живое окно рендеринга, в котором я могу щелкнуть и перетащить на масштаб. Я нашел этот пример,Код работает в JSfiddle, но не на локальном хосте

http://jsfiddle.net/d9BPz/546/

но когда я запускаю его на месте, ничего не появляется. Я полагаю, что это связано с стилем CSS. Я думал, что вам не разрешено использовать CSS-стиль JS-переменных.

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

Я обязательно поместил файлы javascript и css в индексный файл.

источник

2017-02-02 nathphan

Я получаю пустое полотно в этой скрипке. –

Проверьте консоль своего браузера и разместите сообщения об ошибках, которые вы там видите. –

@ScottMarcus Вам нужно щелкнуть, затем перетащить. Это canvas –

В вашей локальной машине, написать скрипт в теле после <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>

Вы получаете исключение, потому что он пытается установить событие OnMouseOver перед загрузкой объекта холста.

источник

2017-02-02 22:15:35

Для меня ваш код работает нормально. Но если есть проблема с canvas-объектом not build, вы можете использовать и использовать функцию my_function() {initDraw (document.getElementById ('canvas')); }. Это должно работать определенно. – Sascha

@ Sascha Это тоже сработает. Я только что упомянул об одном пути. Это другие способы, такие как document.onload и т. Д. Спасибо. –

Код работает в JSfiddle, но не на локальном хосте

ответ

Смежные вопросы