个人中心
gpt4 book ai didi

javascript - 此代码在 pc 浏览器上运行良好，但在移动设备上不起作用

转载 作者：行者123 更新时间：2023-11-28 15:55:27 25 4
gpt4 key购买 nike

<分区> 

<!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>

我老板要我用canvas实现签名功能，但我不擅长，所以我找到这段代码，但我不知道为什么它不起作用我添加了代码this.canvas.addEventListener ('touchstart', function (e) { _this.downEvent(e)});但是还是不行，你们会发现吗？非常感谢!

25 4 0
文章推荐： ios - 在 XCode 7 中找不到这样的模块 Eureka
文章推荐： javascript - 数字之间的逻辑或
文章推荐： html - 在 div 中对齐 ul
文章推荐： javascript - 如何在字符串中的多个位置插入字符串？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com