admin管理员组

文章数量:1333482

I'm trying to drag and drop an object in HTML5 canvas. When i run the code as a .html file from my desktop, it runs perfectly in my browser. When i run the exact same code in a .jsp file then i get no output..To display the output in my web browser from the jsp file I'm using JDeveloper 11.1.1.7.0 as the IDE and Oracle weblogic server as the application server.Does this version of IDE support HTML5??

Another error i'm getting is "Element canvas not expected"

Please help..

Code in .jsp file

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 ".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>

I'm trying to drag and drop an object in HTML5 canvas. When i run the code as a .html file from my desktop, it runs perfectly in my browser. When i run the exact same code in a .jsp file then i get no output..To display the output in my web browser from the jsp file I'm using JDeveloper 11.1.1.7.0 as the IDE and Oracle weblogic server as the application server.Does this version of IDE support HTML5??

Another error i'm getting is "Element canvas not expected"

Please help..

Code in .jsp file

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3/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>
  • javascript
  • html
  • jsp
  • weblogic
  • jdeveloper
Share Improve this question edited Jul 23, 2014 at 9:41 Lukasz Koziara 4,3205 gold badges34 silver badges44 bronze badges asked Jul 23, 2014 at 6:25 LucyLucy 1,85216 gold badges57 silver badges97 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 5

Why are restricting with HTML4 using doctype

use this alone "DOCTYPE HTML" in doc type for HTML5.

本文标签： javascriptHTML5 code not running in JSP fileStack Overflow

版权声明：本文标题：javascript - HTML5 code not running in JSP file - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742352581a2458783.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。