Question

是否在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;
        }
    }

}

Answer 1

WP 7.5上的IE确实支持画布，但不支持touch api。刚刚在我的手机上查看了它。

Answer 2

WP7和WP7.5芒果在撰写本文时不 support touch* events，也不支持桌面标准mousemove event，因为它解释了任何滑动或触摸手指移动（除了敲击）手势，并防止任何鼠标事件被触发。

目前，这使得无法为Windows Phone中的Internet Explorer浏览器编写任何复杂的触摸UI（如您提到的绘图应用程序）。

Answer 3

<!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>

是否在IE9 for Windows Phone 7.5中支持HTML5 Canvas？

3 个答案: