クリックしてスケールにドラッグできるライブレンダリングボックスを作成しようとしています。私は、この例で、JSfiddleではコードは動作しますが、ローカルホストでは機能しません
http://jsfiddle.net/d9BPz/546/
を見つけましたが、私はそれをローカルに実行すると、何も表示されません。私はそれがCSSのスタイリングと関係があると思います。 JS変数のCSSスタイルを与えることは許されていないと思っていました。
.rectangle {
border: 1px solid #FF0000;
position: absolute;
}
正しくインデックスファイルにjavascriptとcssファイルを追加しました。ローカルマシンで
は、キャンバスオブジェクトをロードする前に、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>
後に体内でスクリプトを記述します。
あなたのコードは正常に動作します。しかし、not build canvasオブジェクトに問題がある場合は、
関数とmy_function（）{initDraw（document.getElementById（ 'canvas'）））を使用できます。 }。これは明確に機能するはずです。 – Sascha@Saschaそれも同様に動作します。私はちょうど片道を言いました。彼らはdocument.onloadなどの他の方法です。ありがとう。 –
私はそのフィドルで空のキャンバスを取得します。 –
ブラウザのコンソールを確認し、そこに表示されているエラーメッセージを投稿してください。 –
@ScottMarcusクリックしてドラッグする必要があります。それはキャンバスです –