利用canvas绘制签名

最新推荐文章于 2024-05-23 09:24:55 发布

weixin_33788244

最新推荐文章于 2024-05-23 09:24:55 发布

阅读量299

点赞数

文章标签： python

原文链接：https://my.oschina.net/shuaihong/blog/1862847

版权

2019独角兽企业重金招聘Python工程师标准>>>

重要api:

toDataURL(); 将canvas绘制成图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html,body{
            width: 100%;
            height: 100%;
            margin:0;
            padding:0;
        }
        #canvas{
            width: 100%;
            height: 100%;
            position: relative;
        }
        #canvas canvas{
            display: block;
        }
        #clearCanvas{
            width: 50%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            position: absolute;
            bottom: 0;
            left: 0;
            border: 1px solid #DEDEDE;
            z-index: 1;
        }
        #saveCanvas{
            width: 50%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            position: absolute;
            bottom: 0;
            right: 0;
            border: 1px solid #DEDEDE;
            z-index: 1;
        }
    </style>
</head>
<body>
    <div id="canvas">
        <p id="clearCanvas">清除</p>
        <p id="saveCanvas">保存</p>
    </div>
</body>
</html>
<script>
    window.onload = function() {
        new LineCanvas({
            el: document.getElementById("canvas"),//绘制canvas的父级div
            clearEl: document.getElementById("clearCanvas"),//清除按钮
            saveEl: document.getElementById("saveCanvas"),//保存按钮
        });
    };
    function LineCanvas(obj) {
        this.linewidth = 1;
        this.color = "#000000";
        this.background = "#ffffff";
        for (var i in obj) {
            this[i] = obj[i];
        };
        this.canvas = document.createElement("canvas");
        this.el.appendChild(this.canvas);
        this.cxt = this.canvas.getContext("2d");
        this.canvas.width = this.el.clientWidth;
        this.canvas.height = this.el.clientHeight;
        this.cxt.fillStyle = this.background;
        this.cxt.fillRect(0, 0, this.canvas.width, this.canvas.width);
        this.cxt.strokeStyle = this.color;
        this.cxt.lineWidth = this.linewidth;
        this.cxt.lineCap = "round";
        //开始绘制
        this.canvas.addEventListener("touchstart", function(e) {
            this.cxt.beginPath();
            this.cxt.moveTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
        }.bind(this), false);
        //绘制中
        this.canvas.addEventListener("touchmove", function(e) {
            this.cxt.lineTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
            this.cxt.stroke();
        }.bind(this), false);
        //结束绘制
        this.canvas.addEventListener("touchend", function() {
            this.cxt.closePath();
        }.bind(this), false);
        //清除画布
        this.clearEl.addEventListener("click", function() {
            this.cxt.clearRect(0, 0, this.canvas.width, this.canvas.height);
        }.bind(this), false);
        //保存图片，直接转base64
        this.saveEl.addEventListener("click", function() {
            var imgBase64 = this.canvas.toDataURL();
            console.log(imgBase64);
        }.bind(this), false);
    };
</script>