移动端的canvas电子签名

前端开发和平面设计

前端开发、平面设计

web前端设计与开发上机

移动端的canvas电子签名效果，因为使用的touch事件，pc端不支持，就不加预览效果了。。。
canvas设置的是手机端全屏宽高，可自己进行设置。可能刚打开全屏白。。不要慌手指滑动就好了

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<style type="text/css">
    html,body{
        margin: 0;
        padding: 0;
    }
    html,body,#mycanvas{
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
</style>
<body>

    <div id="mycanvas">
        <canvas id="canvas" ></canvas>
    </div>
    <script type="text/javascript">
        document.body.addEventListener('touchstart', function () {
            event.preventDefault();//手指滑动时，浏览器会上下左右翻屏，
        });
        var oCanvas = document.getElementById("canvas");
        oCanvas.width = document.body.clientWidth;
        oCanvas.height = document.body.clientHeight;
        var cxt = oCanvas.getContext("2d");
        cxt.lineWidth = 2;
        var posX = 0;//x坐标
        var posY = 0;//y坐标
        //手指触摸屏幕可是记录此时的位置作为起点
        oCanvas.addEventListener("touchstart", function() {

            posX = event.changedTouches[0].clientX;
            posY = event.changedTouches[0].clientY;

            cxt.moveTo(posX, posY)
        })
        //手指屏幕滑动画线
        oCanvas.addEventListener("touchmove", function() {

            posX = event.changedTouches[0].clientX;
            posY = event.changedTouches[0].clientY;
            cxt.lineTo(posX, posY);
            cxt.stroke();
        })

    </script>
</body>

</html>

开发前端设计师

前端分开发和设计

前端开发与景观设计

移动端的canvas电子签名

前端开发者

相关推荐

评论抢沙发

评论前必须登录！

最新评论

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

最新评论

评论抢沙发