HTML5代码未在JSP文件中运行 [英] HTML5 code not running in JSP file

查看:121
本文介绍了HTML5代码未在JSP文件中运行的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试在HTML5画布中拖放一个对象。当我从桌面运行代码作为.html文件时,它在我的浏览器中运行完美。当我在.jsp文件中运行完全相同的代码时,我没有输出..在我的Web浏览器中显示jsp文件中的输出我使用JDeveloper 11.1.1.7.0作为IDE和Oracle weblogic服务器作为应用服务器。这个版本的IDE支持HTML5 ??

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"

请帮助..

.jsp文件中的代码

Code in .jsp file

 <!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>


推荐答案

为什么使用doctype限制HTML4

Why are restricting with HTML4 using doctype

在HTML5的文档类型中单独使用DOCTYPE HTML。

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

这篇关于HTML5代码未在JSP文件中运行的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆