2014-07-23 53 views
0

我試圖在HTML5畫布中拖放一個對象。當我從我的桌面運行代碼作爲.html文件時,它在我的瀏覽器中完美運行。當我在.jsp文件中運行完全相同的代碼時,我得不到任何輸出。要在jsp文件的Web瀏覽器中顯示輸出,我使用JDeveloper 11.1.1.7.0作爲IDE和Oracle weblogic服務器應用服務器。這個版本的IDE支持HTML5嗎?未在JSP文件中運行的HTML5代碼

另一個錯誤我得到是 「不期望元素畫布」

請幫助..

守則.jsp文件

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<%@ page contentType="text/html;charset=UTF-8"%> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
<title>floorplan</title> 
<script type="javascript"> 

var canvas; 
var ctx; 
var x = 75; 
var y = 50; 
var WIDTH = 400; 
var HEIGHT = 300; 
var dragok = false; 

function rect(x,y,w,h) { 
ctx.beginPath(); 
ctx.rect(x,y,w,h); 
ctx.closePath(); 
ctx.fill(); 
} 

function clear() { 
ctx.clearRect(0, 0, WIDTH, HEIGHT); 
} 

function init() { 
canvas = document.getElementById("canvas"); 
ctx = canvas.getContext("2d"); 
return setInterval(draw, 10); 
} 
function draw() { 
clear(); 
ctx.fillStyle = "#FAF7F8"; 
rect(0, 0, WIDTH, HEIGHT); 
ctx.fillStyle = "#444444"; 
rect(x - 15, y - 15, 30, 30); 
} 

function myMove(e) { 
if (dragok) { 
    x = e.pageX - canvas.offsetLeft; 
    y = e.pageY - canvas.offsetTop; 
} 
} 

    function myDown(e) { 
    if (e.pageX < x + 15 + canvas.offsetLeft && e.pageX > x - 15 + canvas.offsetLeft && e.pageY < y + 15 + canvas.offsetTop && e.pageY > y - 15 + canvas.offsetTop) { 
    x = e.pageX - canvas.offsetLeft; 
    y = e.pageY - canvas.offsetTop; 
    dragok = true; 
    canvas.onmousemove = myMove; 
    } 
} 

function myUp() { 
dragok = false; 
canvas.onmousemove = null; 
} 

init(); 
canvas.onmousedown = myDown; 
canvas.onmouseup = myUp; 
</script> 
    </head> 
    <body> 
     <div> 
      <canvas id="canvas" width="400" height="300">This text is displayed if your browser does not support HTML5 Canvas.</canvas> 
     </div> 
    </body> 
</html> 

回答

4

爲什麼使用DOCTYPE

與HTML4限制

單獨使用HTML5的doc type中的「DOCTYPE HTML」。

+0

當我創建jsp文件時,該行將自動由Jdeveloper生成。我正在使用Jdeveloper版本11.1.1.7.0 ...此版本的IDE是否支持HTML5? – Lucy

+0

我不確定你正在使用的IDE,但大多數最新的瀏覽器會做..繼續嘗試。 –

+0

做到了這一點...仍然是同樣的問題.. – Lucy