正在使用IE9 for Windows Phone 7.5支持的HTML5 Canvas？

正在使用IE9 for Windows Phone 7.5支持的HTML5 Canvas？正在使用IE9 for Windows Phone 7.5支持的HTML5 Canvas？

我使用的代碼適用於iOS，Android，webkit瀏覽器，Firefox，Opera和IE9，但出於某種原因不適用於Windows Phone？我看到了Windows Phone IE9支持的畫布（我猜在技術上是真的，因爲畫布顯示在手機的瀏覽器中），但您無法使用觸摸事件來繪製它。

//////////////////////////////////////////// 
//start mouse canvas drawn signature script 
//////////////////////////////////////////// 
var canvasToHide; 
var is_touch_device = 'ontouchstart' in document.documentElement; 

sigCanvas = document.getElementById('signatureCanvas'); 
var context = sigCanvas.getContext('2d'); 
context.strokeStyle = '#00f'; // blue 

if (is_touch_device) { 

    // get the canvas element and its context 

    // create a drawer which tracks touch movements 
    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) { 
     // get the touch coordinates 
     var coors = { 
      x: event.targetTouches[0].pageX - 100, 
      y: event.targetTouches[0].pageY - 100 
     }; 
     // 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 
    document.body.addEventListener('touchmove', function (event) { 
     event.preventDefault(); 
    }, false); // end body.onTouchMove 

} else { 

    var bMouseIsDown = false; 

    var iWidth = sigCanvas.width; 
    var iHeight = sigCanvas.height; 

    sigCanvas.onmousedown = function (e) { 
     bMouseIsDown = true; 
     iLastX = e.clientX - 100 + sigCanvas.offsetLeft + (window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft); 
     iLastY = e.clientY - 100 + sigCanvas.offsetTop + (window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop); 
    } 

    sigCanvas.onmouseup = function() { 
     bMouseIsDown = false; 
     iLastX = -1; 
     iLastY = -1; 
    } 

    sigCanvas.onmousemove = function (e) { 
     if (bMouseIsDown) { 
      var iX = e.clientX - 100 + sigCanvas.offsetLeft + (window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft); 
      var iY = e.clientY - 100 + sigCanvas.offsetTop + (window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop); 
      context.moveTo(iLastX, iLastY); 
      context.lineTo(iX, iY); 
      context.stroke(); 
      iLastX = iX; 
      iLastY = iY; 
     } 
    } 

}

來源

2012-02-14 EdenMachine

WP 7.5上的IE確實支持畫布，但不支持觸摸api。剛剛在我的手機上檢查過。

來源

2012-02-14 18:36:40 Alex

<!DOCTYPE html> 
<html> 
<head> 
<script type='text/javascript'> 
function report(ch) { 
var div = document.getElementById('debug'); 
div.innerHTML += ch; 
} 
function myready() { 
var el = document.getElementById('grid'); 
var ctx = el.getContext('2d'); 
ctx.fillStyle='#ff0000'; 
ctx.fillRect(0, 0, el.width, el.height); 
el.addEventListener("mousedown", function (evt) {report('D')}); 
el.addEventListener("mousemove", function (evt) {report('M')}); 
el.addEventListener("mouseup", function (evt) {report('U')});  } 
</script> 
</head> 
<body onload='myready()'> 
<canvas id="grid" width='400' height='60'></canvas> 
<div id='debug'>+</div> 
</body> 

</html>

來源

2012-04-30 04:37:41

嗨，您發佈的代碼是否測試過WP7.5上的IE？ – EdenMachine 2012-05-01 14:13:49

WP7和WP7.5芒果在寫的時間不support touch* events，也不支持桌面標準mousemove event，因爲它解釋任何滑動或觸摸移動（除了攻絲）手指的手勢，並防止任何鼠標事件被觸發。

目前，這使得無法爲Windows手機中的Internet Explorer瀏覽器編寫任何複雜的觸摸UI（如您提到的繪圖應用程序）。

來源

2012-06-02 11:13:46 Flaki

正在使用IE9 for Windows Phone 7.5支持的HTML5 Canvas？

回答

相關問題