赶知识网

H5 canvas实现网页手写签名

Js/Css/jQuery canvas H5 2021-02-24发布 1404次点击

H5利用canvas实现网页手写签名

 

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=yes"/>

    <title>手写签名</title>

    <style type="text/css">

        html,body{

            margin: 0;

            padding: 0;

        }

        .saveimg{

            text-align: center;

        }

        .saveimgs span{

            display: inline-block;

            margin-top:5px;

        }

    </style>

</head>

<body>

 

<div align="center">

    <canvas id="myCanvas" width="500" height="300" style="border:1px solid #6699cc"></canvas>

    <div class="control-ops control">

        <button type="button" class="btn btn-primary" onclick="javascript:clearArea();return false;">清空画板</button>

        Line width : <select id="selWidth" onchange="aaa()">

        <option value="1">1</option>

        <option value="3" selected="selected">3</option>

        <option value="5">5</option>

        <option value="7">7</option>

        <option value="9">9</option>

        <option value="11">11</option>

    </select>

        Color : <select id="selColor" onchange="aaa2()">

        <option value="black" selected="selected">black</option>

        <option value="blue">blue</option>

        <option value="red">red</option>

        <option value="green">green</option>

        <option value="yellow">yellow</option>

        <option value="gray">gray</option>

    </select>

        <button type="button" class="saveimg" onclick="javascript:saveImageInfo();return false;">保存</button>

    </div>

    <div class="saveimgs"></div>

</div>

 

</body>

 

<script type="text/javascript">

    var mousePressed = false;

    var lastX, lastY;

    var ctx = document.getElementById('myCanvas').getContext("2d");

    var c = document.getElementById("myCanvas");

    //      console.log(c)

    //      console.log(c2)

    var control = document.getElementsByClassName("control")[0];

    var saveimgs = document.getElementsByClassName("saveimgs")[0];

 

    window.onload = function(){

        InitThis();

    }

 

    function saveImageInfo(){

        var image = c.toDataURL("image/png");

        var ctximg = document.createElement("span");

        ctximg.innerHTML = "<img src='"+image+"' alt='from canvas'/>";

        if(saveimgs.getElementsByTagName('span').length >= 1){

            var span_old = saveimgs.getElementsByTagName("span")[0];

            saveimgs.replaceChild(ctximg,span_old)

        }

        else{

            saveimgs.appendChild(ctximg);

        }

//          console.log(image)

    }

 

 

    var selected1,selected2;

    function aaa(){

        var sel = document.getElementById('selWidth');

        var value = sel.selectedIndex;

        return selected1 = sel[value].value;

    }

    function aaa2(){

        var sel2 = document.getElementById('selColor');

        var value = sel2.selectedIndex;

        return selected2 = sel2[value].value;

    }

 

    function InitThis() {

//          触摸屏

        c.addEventListener('touchstart', function (event) {

            console.log(1)

            if (event.targetTouches.length == 1) {

                event.preventDefault();// 阻止浏览器默认事件,重要

                var touch = event.targetTouches[0];

                mousePressed = true;

                Draw(touch.pageX - this.offsetLeft, touch.pageY - this.offsetTop, false);

            }

 

        },false);

 

        c.addEventListener('touchmove', function (event) {

            console.log(2)

            if (event.targetTouches.length == 1) {

                event.preventDefault();// 阻止浏览器默认事件,重要

                var touch = event.targetTouches[0];

                if (mousePressed) {

                    Draw(touch.pageX - this.offsetLeft, touch.pageY - this.offsetTop, true);

                }

            }

 

        },false);

 

        c.addEventListener('touchend', function (event) {

            console.log(3)

            if (event.targetTouches.length == 1) {

                event.preventDefault();// 阻止浏览器默认事件,防止手写的时候拖动屏幕,重要

//                  var touch = event.targetTouches[0];

                mousePressed = false;

            }

        },false);

        /*c.addEventListener('touchcancel', function (event) {

            console.log(4)

            mousePressed = false;

        },false);*/

 

 

 

//         鼠标

        c.onmousedown = function (event) {

            mousePressed = true;

            Draw(event.pageX - this.offsetLeft, event.pageY - this.offsetTop, false);

        };

 

        c.onmousemove = function (event) {

            if (mousePressed) {

                Draw(event.pageX - this.offsetLeft, event.pageY - this.offsetTop, true);

            }

        };

 

        c.onmouseup = function (event) {

            mousePressed = false;

        };

    }

 

    function Draw(x, y, isDown) {

        if (isDown) {

            ctx.beginPath();

            ctx.strokeStyle = selected2;

            ctx.lineWidth = selected1;

            ctx.lineJoin = "round";

            ctx.moveTo(lastX, lastY);

            ctx.lineTo(x, y);

            ctx.closePath();

            ctx.stroke();

        }

        lastX = x; lastY = y;

    }

 

    function clearArea() {

        // Use the identity matrix while clearing the canvas

        ctx.setTransform(1, 0, 0, 1, 0, 0);

        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

 

        // 清除签名图片

        if(saveimgs.getElementsByTagName('span').length >= 1){

            var clearImg = saveimgs.getElementsByTagName('span')[0];

            saveimgs.removeChild(clearImg);

        }

 

    }

</script>

 

</html>

作者:王永存

来源:CSDN

原文:https://blog.csdn.net/wang1006008051/article/details/80841581

版权声明:本文为博主原创文章,转载请附上博文链接!

Top10

沪ICP备09053415号 © 赶知识网