正在使用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？

回答

相关问题