代碼適用於jsfiddle，但不適用於瀏覽器

這是我的HTML5代碼。每當我嘗試運行這個文件時，我都會得到一個裏面沒有矩形的黑色畫布。但它在jsfiddle中完美無缺地工作。代碼適用於jsfiddle，但不適用於瀏覽器

<!DOCTYPE html> 
<html> 
<head> 
<title>TEST</title> 
<style> 
body { 
background-color:ivory; 
} 
#canvas { 
border:10px solid red; 
background-color:black; 
} 
</style> 
</head> 
<body> 
<canvas id="canvas" width="400" height="300"> 
</canvas> 
<script type="text/javascript"> 
var c = document.getElementById("canvas"); 
var ctx = c.getContext("2d"); 
var $canvas = $("#canvas"); 
var canvasOffset = $canvas.offset(); 
var offsetX = canvasOffset.left; 
var offsetY = canvasOffset.top; 
var scrollX = $canvas.scrollLeft(); 
var scrollY = $canvas.scrollTop(); 

var isDown = false; 
var startX; 
var startY; 

var toggle=0; 
    var x=150; 
    var y=100; 
    var w=100; 
    var h=100; 
    var wasInside=false; 

ctx.fillStyle = "#04B45F"; 
ctx.fillRect(x, y, w, h); 

function changeColor() { 
if (toggle == 0) { 
    ctx.fillStyle = "#FFFFFF"; 
    toggle = 1; 
} else { 
    ctx.fillStyle = "#04B45F"; 
    toggle = 0; 
} 
ctx.fillRect(x, y, w, h); 
} 
function handleMouseMove(e) { 

e.preventDefault(); 
var mx = parseInt(e.clientX - offsetX); 
var my = parseInt(e.clientY - offsetY); 

var isInsideNow = (mx > x && mx < x + w && my > y && my <= y + h); 

if (isInsideNow && !wasInside) { 
    changeColor(); 
    wasInside = true; 
} else if (!isInsideNow && wasInside) { 
    wasInside = false; 
} 

} 

$("#canvas").mousemove(function (e) { 
handleMouseMove(e); 
}); 

</script> 
</body> 
</html>

這裏是鏈接到jsfiddle http://jsfiddle.net/9GcbH/4/。我在我的系統中使用了確切的代碼。但它不適合我。我能否知道確切的原因以及如何克服它？

來源

2014-03-14 user3334606

沒有你的瀏覽器支持HTML 5，請首先檢查。 –

試試這個

<!DOCTYPE html> 
<html> 
<head> 
<title>TEST</title> 
<style> 
body { 
background-color:ivory; 
} 
#canvas { 
border:10px solid red; 
background-color:black; 
} 
</style> 
</head> 
<body> 
<canvas id="canvas" width="400" height="300"> 
</canvas> 
<script src="http://code.jquery.com/jquery-latest.min.js" 
     type="text/javascript"></script> 

<script type="text/javascript"> 
var c = document.getElementById("canvas"); 
var ctx = c.getContext("2d"); 
var $canvas = $("#canvas"); 
var canvasOffset = $canvas.offset(); 
var offsetX = canvasOffset.left; 
var offsetY = canvasOffset.top; 
var scrollX = $canvas.scrollLeft(); 
var scrollY = $canvas.scrollTop(); 

var isDown = false; 
var startX; 
var startY; 

var toggle=0; 
    var x=150; 
    var y=100; 
    var w=100; 
    var h=100; 
    var wasInside=false; 

ctx.fillStyle = "#04B45F"; 
ctx.fillRect(x, y, w, h); 

function changeColor() { 
if (toggle == 0) { 
    ctx.fillStyle = "#FFFFFF"; 
    toggle = 1; 
} else { 
    ctx.fillStyle = "#04B45F"; 
    toggle = 0; 
} 
ctx.fillRect(x, y, w, h); 
} 
function handleMouseMove(e) { 

e.preventDefault(); 
var mx = parseInt(e.clientX - offsetX); 
var my = parseInt(e.clientY - offsetY); 

var isInsideNow = (mx > x && mx < x + w && my > y && my <= y + h); 

if (isInsideNow && !wasInside) { 
    changeColor(); 
    wasInside = true; 
} else if (!isInsideNow && wasInside) { 
    wasInside = false; 
} 

} 

$("#canvas").mousemove(function (e) { 
handleMouseMove(e); 
}); 

</script> 
</body> 
</html>

來源

2014-03-14 06:14:00

任何人都可以解釋我這部分的代碼如何工作e.preventDefault（）; var mx = parseInt（e.clientX - offsetX）; var my = parseInt（e.clientY - offsetY）; 我明白整個代碼只是無法通過我的頭了？ – user3334606

您需要將您的jQuery代碼包裝在DOM準備好的處理程序$(function() {...});中。

當你包含jQuery時，這項任務自動完成了jsFiddle。

$(function() { 
    $("#canvas").mousemove(function (e) { 
     handleMouseMove(e); 
    }); 
});

其實你錯過了在你的代碼jQuery庫，所以你需要把它列入。所以，你可以這樣做：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script> 
$(function() { 
    $("#canvas").mousemove(function (e) { 
     handleMouseMove(e); 
    }); 
}); 
</script>

和關閉</body>標記之前把上面的代碼在你的頁面的底部。

來源

2014-03-14 06:09:48 Felix

你neeed包括head標籤裏面js腳本從遠程CDN或從當地

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

來源

2014-03-14 06:11:11

代碼適用於jsfiddle，但不適用於瀏覽器

回答

相關問題