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>
當我創建jsp文件時,該行將自動由Jdeveloper生成。我正在使用Jdeveloper版本11.1.1.7.0 ...此版本的IDE是否支持HTML5? – Lucy
我不確定你正在使用的IDE,但大多數最新的瀏覽器會做..繼續嘗試。 –
做到了這一點...仍然是同樣的問題.. – Lucy