使用jquery mobile在html5画布上为移动应用程序绘制平滑线

我试着在画布上画画，就像使用jquerymobile在绘画中使用铅笔工具画画一样

我搜索了很多链接，其中大部分是桌面链接，我尝试为移动应用程序实现相同的逻辑，我只能获得点击事件，但无法在画布上画线

这就是我试图在手机上实现的

这是我的密码

$(document).on(
        'pageshow',
        '#canvaspage',
        function() {
            var painting = false;
            var c = document.getElementById("myCanvas");
            var ctx = c.getContext("2d");
            // ctx.fillStyle="#FF0000";
            // ctx.fillRect(0,0,150,75);
            // ctx.drawImage(icons-18-black.png)

            ctx.canvas.width = window.innerWidth * 0.8;
            ctx.canvas.height = window.innerHeight * 0.8;

            var imageObj = new Image();

            imageObj.onload = function() {
                ctx.drawImage(imageObj, 0, 0, ctx.canvas.width * 0.8,
                        ctx.canvas.height * 0.7);
            };
            imageObj.src = 'Image.png';

//          c.addEventListener('touchstart', function(e) {
            $("#myCanvas").on("touchstart",function(e){
                painting = true;
                e.preventDefault();

                ctx.fillStyle = "#FF0000";
                lastX = e.pageX - this.offsetLeft;
                lastY = e.pageY - this.offsetTop;

            });

//          c.addEventListener('touchend', function(e) {
            $("#myCanvas").on("touchend",function(e){
                painting = false;

            });

//          c.addEventListener('touchmove', function(e) {

            $("#myCanvas").on("touchmove",function(e){  

                  if (painting) {

                        mouseX = e.pageX - this.offsetLeft;
                        mouseY = e.pageY - this.offsetTop;

                        // find all points between        
                        var x1 = mouseX,
                            x2 = lastX,
                            y1 = mouseY,
                            y2 = lastY;


                        var steep = (Math.abs(y2 - y1) > Math.abs(x2 - x1));
                        if (steep){
                            var x = x1;
                            x1 = y1;
                            y1 = x;

                            var y = y2;
                            y2 = x2;
                            x2 = y;
                        }
                        if (x1 > x2) {
                            var x = x1;
                            x1 = x2;
                            x2 = x;

                            var y = y1;
                            y1 = y2;
                            y2 = y;
                        }

                        var dx = x2 - x1,
                            dy = Math.abs(y2 - y1),
                            error = 0,
                            de = dy / dx,
                            yStep = -1,
                            y = y1;

                        if (y1 < y2) {
                            yStep = 1;
                        }

                        lineThickness = 5 - Math.sqrt((x2 - x1) *(x2-x1) + (y2 - y1) * (y2-y1))/10;
                        if(lineThickness < 1){
                            lineThickness = 1;   
                        }
                        alert(painting +" " +x1 +" "+x2);
                        for (var x = x1; x < x2; x++) {

//                          alert(x +" "+ y +" "+ lineThickness);
                            if (steep) {
                                ctx.fillRect(y, x, lineThickness , lineThickness );
                            } else {
                                ctx.fillRect(x, y, lineThickness , lineThickness );
                            }
                            alert(steep);
                            error += de;
                            if (error >= 0.5) {
                                y += yStep;
                                error -= 1.0;
                            }
                        }



                        lastX = mouseX;
                        lastY = mouseY;

                    }



//              ctx.fillRect(0, 0, 150, 75);
                e.preventDefault();
            }, false);
        });

$（文档）。在(
“网页秀”，
"拉票",，
函数（）{
var=假；
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
//ctx.fillStyle=“#FF0000”；
//ctx.fillRect（0,0150,75）；
//ctx.drawImage（icons-18-black.png）
ctx.canvas.width=window.innerWidth*0.8；
ctx.canvas.height=window.innerHeight*0.8；
var imageObj=新图像（）；
imageObj.onload=函数（）{
ctx.drawImage（imageObj，0,0，ctx.canvas.width*0.8，
ctx.canvas.height*0.7）；
};
imageObj.src='Image.png'；
//c.addEventListener（'touchstart'，函数（e）{
$（“#myCanvas”）。在（“touchstart”上，函数（e）{
绘画=真实；
e、 预防默认值（）；
ctx.fillStyle=“#FF0000”；
lastX=e.pageX-this.offsetLeft；
lastY=e.pageY-this.offsetTop；
});
//c.addEventListener（'touchend'，函数（e）{
$（“#myCanvas”）。在（“touchend”，函数（e）上{
绘画=假；
});
//c.addEventListener（'touchmove'，函数（e）{
$（“#myCanvas”）。在（“touchmove”，函数（e）{
如果（绘画）{
mouseX=e.pageX-this.offsetLeft；
mouseY=e.pageY-this.offsetTop；
//找出所有点之间的距离
var x1=鼠标，
x2=lastX，
y1=老鼠，
y2=整形术；
var陡峭=（数学abs（y2-y1）>数学abs（x2-x1））；
如果（陡峭）{
var x=x1；
x1=y1；
y1=x；
变量y=y2；
y2=x2；
x2=y；
}
如果（x1>x2）{
var x=x1；
x1=x2；
x2=x；
变量y=y1；
y1=y2；
y2=y；
}
变量dx=x2-x1，
dy=数学绝对值（y2-y1），
错误=0，
de=dy/dx，
yStep=-1，
y=y1；
if（y1=0.5）{
y+=yStep；
误差-=1.0；
}
}
lastX=鼠标；
拉蒂=老鼠；
}
//ctx.fillRect（0,0,150,75）；
e、 预防默认值（）；
}，假）；
});

在上面的代码中，我能够获得所有触摸事件，但无法画线

我怎样才能在画布上画线

谢谢：）

您可以使用sketch.js（）稍加修改，使其在移动设备上工作。leonth在这里的评论中给出了修改：；您基本上在mousedown/touchstart事件中为插件添加了3行内容：

switch (e.type) {
    case 'mousedown':
    case 'touchstart':          
      if (this.painting) {    //add
        this.stopPainting();  //add
      }                       //add
      this.startPainting();
      break;
...

这里有一个，请在移动设备上试用

---

检查此项，它正在工作，但我收到以下错误

12-12 06:27:04.905:E/Web控制台（31748）：Uncaught TypeError:无法读取在处未定义的属性“pageX”file:///android_asset/www/js/sketch.js:106 

每当我尝试绘制新草图时，它都从上一个草图的端点开始。如何避免？当我访问nexus 7上的小提琴时，它似乎工作正常。如果你将其编译到本机应用程序，其他人会我必须加入，因为我没有这方面的经验。