java无法在Android上使用HTML5 canvas touch

2 周，1 日 Questions & Answers 1182

http://pastie.org/2998693有我的索引。html、活动和旧版本的索引。与画布一起工作的html。现在我基本上只是想让触摸屏工作，但当我现在这样做的时候，我得到的只是一个空白屏幕，触摸屏上什么也没发生

索引。html-不起作用

<!doctype html>
<html>
<head>
  <title>Touch Event Example</title>
  <meta name="viewport" content = "width = device-width, initial-scale = 1, minimum-scale = 1, maximum-scale = 1, user-scalable = no" /> 
  <script src="js/jquery.min.js" type="text/javascript"></script>
  <style type="text/css">
    body {
        margin: 0px;
        padding: 0px;
    }

    #canvas {
        width: 100%;
        height: 100%;
        border: 5px solid black;
        background-color: #000;
    }
  </style>

  <script>
  $(document).ready(function(){ 
  // Hide URL bar
  window.scrollTo(0, 1);

    var furby1 = new Image();
    var furby2 = new Image();
    furby1.src = "http://aux3.iconpedia.net/uploads/524163855.png";
    furby2.src = "http://www.veryicon.com/icon/png/Game/Poker/Poker.png";
    var furby_array = [];
    furby_array.push(furby1);
    furby_array.push(furby2);

    var colors = [];
    colors.push("#40FBA0","#FB0007","#D182FF","#D9FB66","#00B200");

    function drawFurby(x,y,ctx,width,height) {
        //ctx.fillStyle  = colors[Math.floor(Math.random()*6)];
        //ctx.fillRect(0, 0, width, height);
        var randomnumber=Math.floor(Math.random()*2);
        ctx.drawImage(furby_array[randomnumber], x, y, 200, 200);
        ctx.font = 'bold 30px sans-serif';
        ctx.fillStyle  = colors[Math.floor(Math.random()*6)];
        ctx.fillText("WHOA POKER!", x, y);
    }

    var ongoingTouches = new Array;

    function handleStart(evt) {

      evt.preventDefault();
      var el = document.getElementById("canvas");
      var ctx = el.getContext("2d");
      var width = window.innerWidth;
      var height = window.innerHeight;
      ctx.canvas.width  = width;
      ctx.canvas.height = height;
      var touches = evt.changedTouches;

      for (var i=0; i<touches.length; i++) {
        //ongoingTouches.push(touches[i]);
        var x = touches[i].pageX - 150;
        var y = touches[i].pageY - 150;

        // DRAW
        drawFurby(x,y,ctx, width, height);

      }

    }

    function handleMove(evt) {
      evt.preventDefault();
      var el = document.getElementById("canvas");
      var ctx = el.getContext("2d");
      var width = window.innerWidth;
      var height = window.innerHeight;
      ctx.canvas.width  = window.innerWidth;
      ctx.canvas.height = window.innerHeight;
      var touches = evt.changedTouches;

      for (var i=0; i<touches.length; i++) {
        var x = touches[i].pageX - 150;
        var y = touches[i].pageY - 150;

        // DRAW
        drawFurby(x,y,ctx, width, height);

        ongoingTouches.splice(idx, 1, touches[i]);  // swap in the new touch record
      }
    }

    function handleEnd(evt) {
      evt.preventDefault();
      var el = document.getElementById("canvas");
      var ctx = el.getContext("2d");
      ctx.canvas.width  = window.innerWidth;
      ctx.canvas.height = window.innerHeight;
      var touches = evt.changedTouches;


      for (var i=0; i<touches.length; i++) {

        var x = touches[i].pageX - 150;
        var y = touches[i].pageY - 150;

        // DRAW
        drawFurby(x,y,ctx, width, height);

        ongoingTouches.splice(i, 1);  // remove it; we're done

      }
    }

    function handleCancel(evt) {
      evt.preventDefault();
      var touches = evt.changedTouches;

      for (var i=0; i<touches.length; i++) {
        ongoingTouches.splice(i, 1);  // remove it; we're done
      }
    }


    function startup() {
      var el = document.getElementById("canvas");
      el.addEventListener("touchstart", handleStart, false);
      el.addEventListener("touchend", handleEnd, false);
      el.addEventListener("touchcancel", handleCancel, false);
      el.addEventListener("touchleave", handleEnd, false);
      el.addEventListener("touchmove", handleMove, false);
    }

    startup();
    console.log("loaded!");
}); 
  </script>
</head>
<body>
  <canvas id="canvas">
    You really badly need to use a different browser.
  </canvas>
</body>
</html>

旧索引。html-工作

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: #000;
    padding: 0px;
    margin: 0px;
}
</style>
<META 
     HTTP-EQUIV="Refresh"
     CONTENT="1; URL=index.html">

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">

window.onload=function(){

// Hide URL bar
  window.scrollTo(0, 1);

document.ontouchmove = function(e){ e.preventDefault(); }

// Declare context with canvas
var ctx;
ctx = $('#canvas')[0].getContext("2d");
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;

// Declare images
var start_screen = new Image();

// Set image src
start_screen.src = "images/title.jpg";

// Title screen class
function title_screen() {
    var self = this;
    this.img = start_screen;

    this.draw = function() {
        ctx.drawImage(start_screen, 0, 0, window.innerWidth, window.innerHeight);
    }
}


// Start game
oso_title_screen = new title_screen;
oso_title_screen.draw();

}

</script>
</head>

<body>

<canvas id="canvas">
Your browser does not support the canvas element.
</canvas>

</body>
</html>

活动

package com.rabblesoft.game;

import 安卓.app.Activity;
import 安卓.graphics.Color;
import 安卓.os.Bundle;
import 安卓.view.View;
import 安卓.webkit.WebView;

public class GameActivity extends Activity {
    /** Called when the activity is first created. */
    WebView mWebView;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        mWebView = (WebView) findViewById(R.id.webview);
        mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.loadUrl("file:///安卓_asset/index.html");
        mWebView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
        mWebView.setBackgroundColor(Color.parseColor("#000000"));
    }
}

Python中文网

有 Java 编程相关的问题?

java无法在Android上使用HTML5 canvas touch

索引。html-不起作用

旧索引。html-工作

活动

共 (1) 个答案

# 1 楼答案