问题描述

手机端canvas刮奖无效果，PC端好好的

window.onload=function () {
var canvas = document.getElementById("birthday");
var width = window.screen.availWidth;
canvas.width = window.screen.availWidth;
canvas.height = width*2;
canvas.style.border = "1px solid red";
var context = canvas.getContext("2d");

        /*图像加载*/
        var image = new Image();
        image.src="a1.jpg";
        image.addEventListener('load',eventSheetloaded,false);
        function eventSheetloaded(){
            context.drawImage(image,0,0);
        }

        var linex = [];
        var liney = [];
        var lastX = -1;
        var lastY = -1;
        var flag = 0;

        //临时绘图数据
        var imageData = "";

        canvas.addEventListener('mousemove', onMouseMove, false);
        canvas.addEventListener('mousedown', onMouseDown, false);
        canvas.addEventListener('mouseup', onMouseUp, false);

        function onMouseMove(evt) {
            if (flag == 1) {

                var x = evt.layerX;
                var y = evt.layerY;
                linex.push(x);
                liney.push(y);
                context.lineTo(x,y);
                lastX = x;

        } lastY = y;

        context.lineCap="round";
        context.lineJoin="round";
        context.lineWidth = 20;
        context.shadowColor = 'white';

        context.strokeStyle = "rgba(0,0,0,0)";
        context.globalCompositeOperation="destination-out";
        context.stroke();
        context.strokeStyle = "rgba(254,0,0,0.1)";
        context.globalCompositeOperation="destination-out";
        context.stroke();
    }

        function onMouseDown(evt) {
            flag = 1;
            lastX = evt.layerX;
            lastY = evt.layerY;
            linex.push(lastX);
            liney.push(lastY);

            context.beginPath();
            context.moveTo(lastX,lastY);
        }

        function onMouseUp(evt) {
            flag = 0;
            context.clearRect(0,0,0,0);
        }

        function onMouseOut(evt){
            flag = 0;
            context.clearRect(0,0,500,400);
            reDraw();
        }

    };

            为什么呢·！？？？？？

解决方案

手机上没有鼠标，你要增加对触摸的支持。

解决方案二：

http://www.2cto.com/kf/201402/276737.html