使用Phonegap 2.7不能在HTML5 Canvas上绘制

我在网上find了一个简单的抽屉例子。 它在PC上正常工作。

当我在Galaxy S4(4.2.2)上使用Phonegap 2.7,在Android 2.2或4.2.2上运行它时,对于这个项目来说,它根本不会画任何东西。

我究竟做错了什么 ?

<html lang="en"> <head> <meta charset="utf-8" /> <title>Desktops and Tablets</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" charset="utf-8" src="cordova-2.7.0.js"></script> <script type="text/javascript"> $(document).ready(function () { initialize(); }); // works out the X, Y position of the click inside the canvas from the X, Y position on the page function getPosition(mouseEvent, sigCanvas) { var x, y; if (mouseEvent.pageX != undefined && mouseEvent.pageY != undefined) { x = mouseEvent.pageX; y = mouseEvent.pageY; } else { x = mouseEvent.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; y = mouseEvent.clientY + document.body.scrollTop + document.documentElement.scrollTop; } return { X: x - sigCanvas.offsetLeft, Y: y - sigCanvas.offsetTop }; } var sigCanvas; var context; function initialize() { sigCanvas = document.getElementById("canvasSignature"); context = sigCanvas.getContext("2d"); context.strokeStyle = 'Black'; context.lineWidth = 1; if ('ontouchstart' in document.documentElement) { var drawer = { isDrawing: false, touchstart: function (coors) { context.beginPath(); context.moveTo(coors.x, coors.y); this.isDrawing = true; }, touchmove: function (coors) { if (this.isDrawing) { context.lineTo(coors.x, coors.y); context.stroke(); } }, touchend: function (coors) { if (this.isDrawing) { this.touchmove(coors); this.isDrawing = false; } } }; // create a function to pass touch events and coordinates to drawer function draw(event) { if (event.targetTouches[0] === undefined) { context.closePath(); this.isDrawing = false; return; } // get the touch coordinates. Using the first touch in case of multi-touch var coors = { x: event.targetTouches[0].pageX, y: event.targetTouches[0].pageY }; // Now we need to get the offset of the canvas location var obj = sigCanvas; if (obj.offsetParent) { // Every time we find a new object, we add its offsetLeft and offsetTop to curleft and curtop. do { coors.x -= obj.offsetLeft; coors.y -= obj.offsetTop; } // The while loop can be "while (obj = obj.offsetParent)" only, which does return null // when null is passed back, but that creates a warning in some editors (ie VS2010). while ((obj = obj.offsetParent) != null); } // pass the coordinates to the appropriate handler drawer[event.type](coors); } // attach the touchstart, touchmove, touchend event listeners. sigCanvas.addEventListener('touchstart', draw, false); sigCanvas.addEventListener('touchmove', draw, false); sigCanvas.addEventListener('touchend', draw, false); // prevent elastic scrolling sigCanvas.addEventListener('touchmove', function (event) { event.preventDefault(); }, false); } else { // start drawing when the mousedown event fires, and attach handlers to // draw a line to wherever the mouse moves to $("#canvasSignature").mousedown(function (mouseEvent) { var position = getPosition(mouseEvent, sigCanvas); context.moveTo(position.X, position.Y); context.beginPath(); $(this).mousemove(function (mouseEvent) { drawLine(mouseEvent, sigCanvas, context); }).mouseup(function (mouseEvent) { finishDrawing(mouseEvent, sigCanvas, context); }).mouseout(function (mouseEvent) { finishDrawing(mouseEvent, sigCanvas, context); }); }); } } // draws a line to the x and y coordinates of the mouse event inside // the specified element using the specified context function drawLine(mouseEvent, sigCanvas, context) { var position = getPosition(mouseEvent, sigCanvas); context.lineTo(position.X, position.Y); context.stroke(); } // draws a line from the last coordiantes in the path to the finishing // coordinates and unbind any event handlers which need to be preceded // by the mouse down event function finishDrawing(mouseEvent, sigCanvas, context) { // draw the line to the finishing coordinates drawLine(mouseEvent, sigCanvas, context); context.closePath(); // unbind any events which could draw $(sigCanvas).unbind("mousemove") .unbind("mouseup") .unbind("mouseout"); } </script> </head> <body> <h1>Canvas test</h1> <div id="canvasDiv"> <canvas id="canvasSignature" width="500px" height="500px" style="border:2px solid #000000;"></canvas> </div> </body> </html> 

Solutions Collecting From Web of "使用Phonegap 2.7不能在HTML5 Canvas上绘制"

我在Galaxy S4上遇到同样的问题。 HTML Canvas绘图不在webview中显示,但它在Safari浏览器中工作。 Galaxy S2,S3不具有相同的问题。

在我的情况下,当我禁用硬件加速,canvas的作品。

 appView.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null); 

但速度很慢。 它与PhoneGap没有任何关系。 三星在其实施上可能会犯另一个错误。

当我尝试绘制任何图像的坐标0,0时,我的银河S4“错误”。

我只是意识到这一点,因为我拖animation布内的元素,并且绘制到这些坐标的任何颜色都覆盖整个屏幕。

当我拖动到没有覆盖canvas中0,0坐标的图像时,我的应用程序正常运行。 也从来没有在桌面浏览器发生。 很奇怪。

我只是运行:

 context.clearRect(0,0,1,1); 

在我的绘图函数结束时,它解决了我。 至less值得一试。

我朋友的Galaxy S3没有这样做。

你是用Phonegap Build还是Eclipse来创build的? 如果Eclipse,你有你的项目设置正确吗?

replace$(document).ready(function () { with $(document).on("deviceready",function () {因为phonegap使用deviceready事件发出初始化信号。

同时保存项目中的jQuery JS文件; 如果HTTP请求失败或者您的Android设备没有连接,则应用程序将无法加载,因为它无法加载jQuery。

因此,请replace<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

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

我尝试了上面的代码与这些修改(加上我加了一些debugging),它运行良好,我运行Android 2.2.3的HTC HD2和我的Nexus 7运行Android 4.2.2

这是一个包含我创build的Eclipse项目的压缩文件 ,以testing它并生成Android APK。 尝试一下你的设备,看看它是否工作。

你应该考虑使用Crosswalk。 它取代了默认的android webview,这是非常漫不经心(每个供应商通常是自己的),很难保持你的应用程序在所有的android版本和供应商之间保持一致。

Crosswalk有一个兼容Cordova的版本,在我所有的testing中,性能提升都很明显。

https://crosswalk-project.org/