Поддерживается ли рисование на HTML5 Canvas в IE9 для Windows Phone 7.5?

Question

Поддерживается ли рисование на HTML5 Canvas в IE9 для Windows Phone 7.5?

Код, который я использую, работает для 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

WP7 и WP7.5 Mango на момент написания не не поддерживают сенсорные * события , а также не поддерживают стандартное для настольного компьютера событие mousemove , поскольку он интерпретирует любое движение пальцем или касание (за исключением касания) пальцами жеста и предотвращает запуск любых событий мыши.

В настоящее время это делает невозможным кодирование какого-либо изощренного сенсорного интерфейса (например, приложения для рисования, которое вы упомянули) для браузера Internet Explorer, найденного в Windows Phones.

Answer 2

IE в WP 7.5 поддерживает canvas, но не поддерживает сенсорный API. Только что проверил это на моем телефоне.

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>