chrome mobile上的canvas问题

我正在编写一个用于在移动设备上捕获签名的组件。我的代码在iOS和Android上都可以正常工作。但不是在所有设备上。chrome mobile上的canvas问题

例如我在Galaxy Tab 2 7.0上进行测试，一切正常。我在Android Browser，Chrome，FF，Opera和Maxthon中测试过。没有问题。

现在测试我的Galaxy Note 2我想知道为什么它不适用于Chrome。没有错误。我的JavaScript工作正常。但输入不会呈现给我的画布。在Android浏览器中按预期工作。

任何想法？

这里是我的处理程序：

var canvas = document.getElementById('canvas'); 
var startedPainting = false; 

canvas.addEventListener("mousedown", handleStart, false); 
canvas.addEventListener("mousemove", handleMove, false); 
canvas.addEventListener("mouseup", handleEnd, false); 
canvas.addEventListener("touchstart", handleStart, false); 
canvas.addEventListener("touchmove", handleMove, false); 
canvas.addEventListener("touchend", handleEnd, false); 

function handleStart(evt) { 
     evt.preventDefault(); 

     startedPainting = true; 
     var el = $("#canvas").get(0); 
     var ctx = el.getContext("2d"); 
     ctx.lineWidth = 3; 
     var touches = evt.changedTouches; 

     if (touches) { 
     ctx.moveTo(touches[0].pageX - el.offsetLeft, touches[0].pageY - el.offsetTop); 
     for (var i=0; i<touches.length; i++) { 
      ctx.lineTo(touches[i].pageX - el.offsetLeft, touches[i].pageY - el.offsetTop); 
      } 
     } 
     else{ 
      ctx.moveTo(evt.pageX - el.offsetLeft, evt.pageY - el.offsetTop); 
      ctx.lineTo(evt.pageX - el.offsetLeft, evt.pageY - el.offsetTop); 
     }   
     ctx.stroke(); 
    } 


function handleMove(evt) { 
     evt.preventDefault(); 

     if (startedPainting) { 
      var el = $("#canvas").get(0); 
      var ctx = el.getContext("2d"); 
      ctx.lineWidth = 3; 
      var touches = evt.changedTouches; 

      if (touches) { 
      for (var i=0; i<touches.length; i++) {   
       ctx.lineTo(touches[i].pageX - el.offsetLeft, touches[i].pageY - el.offsetTop); 
       } 
      } 
      else{ 
       ctx.lineTo(evt.pageX - el.offsetLeft, evt.pageY - el.offsetTop); 
      } 
      ctx.stroke();  
     } 
    } 

function handleEnd(evt) { 
     evt.preventDefault(); 
     startedPainting = false; 
     var el = $("#canvas").get(0); 
     var ctx = el.getContext("2d"); 
     ctx.lineWidth = 3; 
     var touches = evt.changedTouches; 

     if (touches) { 
      for (var i=0; i<touches.length; i++) { 
       ctx.lineTo(touches[i].pageX - el.offsetLeft, touches[i].pageY - el.offsetTop); 
       } 
     } 
     else{ 
     ctx.lineTo(evt.pageX - el.offsetLeft, evt.pageY - el.offsetTop); 
     } 
     ctx.stroke();  
    }

来源

2013-06-04 jens_h

看来，这是一个GPU驱动程序的问题。 Google意识到这个问题，并且在Chromium问题数据库中已经讨论过＃231082。

https://code.google.com/p/chromium/issues/detail?id=231082

它看起来像问题已解决，并（如2013年6月26日的）目前处于测试阶段。

来源

2013-06-27 00:02:03

chrome mobile上的canvas问题

回答

相关问题