带鼠标和iPad触摸屏的绘图画布

时间:2018-11-27 14:31:13

标签: javascript canvas html5-canvas

我开始研究画布并遇到问题,在画布的帮助下使用鼠标onmousedown,onmousemove,onmouseup进行绘制,而对于触摸屏,iPad使用了touchstart,touchmove,touchend,但是触摸屏的代码不起作用。我注释掉了无效的代码,对于真正的帮助和指导,我将不胜感激。

在ipad中绘制画布的代码不起作用      canvas.ontouchstart,canvas.touchstart,canvas.touchmove,canvas.touchend

 function unit(){
        canvasOffset = canvas.getBoundingClientRect();
        ctx.lineJoin = "round";
        canvas.onmousedown = function(e) {
            drawing = true;
            ctx.beginPath();
        }
        //canvas.ontouchstart = function(e) {
        //  if (e.touches) e = e.touches[0];
        //  return false;
        //}
        //canvas.touchstart = function(e) {
        //      drawing = true;
        //      ctx.beginPath();
        //}
        canvas.onmousemove = function(e) {
            if (drawing) {
                var mousePosition = getMousePosition(e);
              ctx.lineTo(mousePosition[0], mousePosition[1]);
                        myColor =      document.getElementById('myColor').style.background;
                        ctx.strokeStyle = myColor;
                ctx.stroke();
            }
        };
        //canvas.touchmove = function(e) {
        //      if (drawing) {
        //              var mousePosition = getMousePosition(e);
        //              ctx.lineTo(mousePosition[0], mousePosition[1]);
        //              myColor = document.getElementById('myColor').style.background;
        //              ctx.strokeStyle = myColor;
        //              ctx.stroke();
        //      }
        //};
        canvas.onmouseup = function(e) {
            drawing = false;
            ctx.closePath();
        }
        //canvas.touchend = function(e) {
        //      drawing = false;
        //      ctx.closePath();
        //}
        function getMousePosition(mouseEvent) {
            return [Math.floor(event.offsetX), Math.floor(event.offsetY)];
        }
}

0 个答案:

没有答案