Question

<!doctype html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8" />  
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />  
    <title> canvas  </title>  
    <style type="text/css">  
        #canvasId {  
            background-color: #FFFFcc;  
        }  
    </style>  

</head>  
<body>  

    <canvas id="canvasId" width="700" height="500"></canvas><br />  
    <input type="button" value="clear" onclick="hw.clear();" /> 
    <script type="text/javascript">  
        function Handwriting(id) {  
            this.canvas = document.getElementById(id);  
            this.ctx = this.canvas.getContext("2d");  
            this.ctx.fillStyle = "rgba(0,0,0,0.25)";  
            var _this = this;  
            this.canvas.onmousedown = function (e) { _this.downEvent(e)};  
            this.canvas.onmousemove = function (e) { _this.moveEvent(e)};  
            this.canvas.onmouseup = function (e) { _this.upEvent(e)};  
            this.canvas.onmouseout = function (e) { _this.upEvent(e)}; 
            this.canvas.addEventListener('touchstart', function (e) { _this.downEvent(e)});  
            this.canvas.addEventListener('touchmove ', function (e) { _this.moveEvent(e)});  
            this.canvas.addEventListener('touchend ', function (e) { _this.upEvent(e)}); 
            this.moveFlag = false;  
            this.upof = {};  
            this.radius = 0;  
            this.has = [];  
            this.lineMax = 15;  
            this.lineMin = 1;  
            this.linePressure = 1;  
            this.smoothness = 80;  
        }            
        Handwriting.prototype.clear = function () {  
            this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height);  
        }  
        Handwriting.prototype.downEvent = function (e) {  
            this.moveFlag = true;  
            this.has = [];  
            this.upof = this.getXY(e);  
        }            
        Handwriting.prototype.moveEvent = function (e) {  
            if (!this.moveFlag)  
                return;  
            var of = this.getXY(e);  
            var up = this.upof;  
            var ur = this.radius;  
            this.has.unshift({time:new Date().getTime() ,dis:this.distance(up,of)});  
            var dis = 0;  
            var time = 0;  
            for (var n = 0; n < this.has.length-1; n++) {  
                dis += this.has[n].dis;  
                time += this.has[n].time-this.has[n+1].time;  
                if (dis>this.smoothness)  
                    break;  
            }  
            var or = Math.min(time/dis*this.linePressure+this.lineMin , this.lineMax) / 2;  
            this.radius = or;  
            this.upof = of;  
            if (this.has.length<=4)  
                return;  
            var len = Math.round(this.has[0].dis/2)+1;  
            for (var i = 0; i < len; i++) {  
                var x = up.x + (of.x-up.x)/len*i;  
                var y = up.y + (of.y-up.y)/len*i;  
                var r = ur + (or-ur)/len*i;  
                this.ctx.beginPath();  
                this.ctx.arc(x,y,r,0,2*Math.PI,true);  
                this.ctx.fill();  
            }  
        }            
        Handwriting.prototype.upEvent = function (e) {  
            this.moveFlag = false;  
        }            
        Handwriting.prototype.getXY = function (e)  
        {  
            return {  
                x : e.clientX - this.canvas.offsetLeft + (document.body.scrollLeft || document.documentElement.scrollLeft),  
                y : e.clientY - this.canvas.offsetTop  + (document.body.scrollTop || document.documentElement.scrollTop)  
            }  
        }            
        Handwriting.prototype.distance = function (a,b)  
        {  
            var x = b.x-a.x , y = b.y-a.y;  
            return Math.sqrt(x*x+y*y);  
        }   
        var hw = new Handwriting("canvasId");  
        hw.lineMax = 40;  
        hw.lineMin = 5;  
        hw.linePressure = 2.5;  
        hw.smoothness = 100;    
    </script>  
</body>  
</html>

我的老板要我使用画布并实现签名功能，但我并不擅长，所以我找到了这段代码，但我不知道为什么它不起作用我添加了代码this.canvas.addEventListener('touchstart', function (e) { _this.downEvent(e)});但它仍然不起作用，所以你们会发现？太多了！

Answer 1

首先 - 'touchmove '和'touchend '不应该包含该空格

所以你需要修复

this.canvas.addEventListener('touchmove', function (e) { _this.moveEvent(e)});  
this.canvas.addEventListener('touchend', function (e) { _this.upEvent(e)});

然后getXY函数也需要getXY来触摸事件

Handwriting.prototype.getXY = function(e) {
    var x, y;
    if (e.changedTouches && e.changedTouches[0]) {
        var offsety = this.canvas.offsetTop || 0;
        var offsetx = this.canvas.offsetLeft || 0;
        x = e.changedTouches[0].pageX - offsetx;
        y = e.changedTouches[0].pageY - offsety;
    } else if (e.layerX || 0 == e.layerX) {
        x = e.layerX;
        y = e.layerY;
    } else if (e.offsetX || 0 == e.offsetX) {
        x = e.offsetX;
        y = e.offsetY;
    }
    return {
        x: x,
        y: y
    };
}

这段代码在PC浏览器上运行良好，但它不适用于移动设备

1 个答案: