手写签名（移动端）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
    <style>
        #canvas {
            border: 1px dotted black;
            position: relative;
            top: 20px;
            left: 20px;
        }
    </style>
</head>
<body>
    
    <div id="app">
        <canvas id="canvas" ref="canvas" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"></canvas>
    </div>

    <script>

        let x, y = 0

        let canvas_width = 320
        let canvas_height = 180


        let vm = new Vue({
            el: "#app",
            data: {
                isDrawing: false,
                qm_count: 0,
                qm_data: null,
                qm_image_url: '',
                context: null,
                rect: null,

            },
            methods: {
                touchstart(e) {
                    e.preventDefault();

                    x = e.changedTouches[0].clientX - this.rect.left;
                    y = e.changedTouches[0].clientY - this.rect.top;

                    this.isDrawing = true;
                },
                touchmove(e) {
                    e.preventDefault();
                    this.qm_count++
                    if (this.isDrawing === true) {
                        this.drawLine(x, y, e.changedTouches[0].clientX - this.rect.left, e.changedTouches[0].clientY - this.rect.top);
                        x = e.changedTouches[0].clientX - this.rect.left;
                        y = e.changedTouches[0].clientY - this.rect.top;
                    }
                },
                touchend(e) {
                    e.preventDefault();

                    if (this.isDrawing === true) {
                        this.drawLine(x, y, e.changedTouches[0].clientX - this.rect.left, e.changedTouches[0].clientY - this.rect.top);
                        x = 0;
                        y = 0;
                        this.isDrawing = false;
                    }
                },

                drawLine(x1, y1, x2, y2) {
                    this.context.beginPath();
                    this.context.strokeStyle = 'black';
                    this.context.lineWidth = 5;
                    this.context.moveTo(x1, y1);
                    this.context.lineTo(x2, y2);
                    this.context.stroke();
                    this.context.closePath();
                },

                clear_canvas() {
                    this.qm_data = null
                    this.qm_image_url = ''
                    this.context.fillStyle = "rgb(128, 128, 128)";
                    this.context.fillRect (0, 0, canvas_width, canvas_height);
                    this.qm_count = 0
                },
            },
            mounted() {

                let canvas = this.$refs.canvas

                canvas.width = canvas_width
                canvas.height = canvas_height

                this.context = canvas.getContext('2d')
                this.rect = canvas.getBoundingClientRect()

                this.clear_canvas()
            }
        })

    </script>

</body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容