H5 Canvas移动端的自定义画板

在线测试地址:http://huluwa-test.oss-cn-hangzhou.aliyuncs.com/pdf/index.html#/qrcode

由于技术不好，只能做出这个鬼样子，希望大神们别介意（线上测试是用vue来写的还处于学习阶段不会写还处于开发阶段）

1.这个是线上地址打开的页面

H5 Canvas移动端的自定义画板

2.这是扫描二维码后手机打开的界面（不要用微信去扫，微信显示不安全用支付宝或其他的可以出来页面）

H5 Canvas移动端的自定义画板

3.当手机页面绘制忘了你想要绘制的东西，点击提交 PC端页面就会变成这个样子啦（达到了及时更新的效果）

H5 Canvas移动端的自定义画板

Html5的canvas移动端自定义内容画板,还可以将图片保存到本地哦!!!

最近的需求是手机上画好内容,图片保存到本地,百度了很久,好像都没有找到合适的代码,

百度找到的全是支持pc端的,所以我就自己改了下事件,就把只支持pc端的canvas画板改成了只支持wap端的啦

效果图:

H5 Canvas移动端的自定义画板

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>签名画板</title>
    <style>
        *{ padding:0; margin:0;}
        body{ background:#ccc;}
        canvas{ background:#fff; margin:50px 10px;}
    </style>
</head>
<body>
<h1 align="center" style="color:red">只支持移动端,不支持PC端</h>
    <div style="text-align: center">
        <canvas height="600" width="900"  id="canvas">
            <span>亲，您的浏览器不支持canvas，换个浏览器试试吧！</span>
        </canvas>
    </div>
    </div>
    <h1 align="center" style="color:red">只支持移动端,不支持PC端</h>
        <script>

            window.onload = function(){
                var canvas = document.getElementById("canvas");
                var ctx = canvas.getContext("2d");
                ctx.lineWidth = 6.0;
                canvas.addEventListener('touchstart',function(event){//触摸点按下事件
                    if (event.targetTouches.length == 1) {
                        var touch = event.targetTouches[0];
                        ctx.beginPath();
                        ctx.moveTo(touch.clientX-canvas.offsetLeft,touch.clientY-canvas.offsetTop);
                        canvas.addEventListener('touchmove',function (event) {//手机拖动触摸点事件
                            var touche = event.targetTouches[0];
                            ctx.lineTo(touche.clientX - canvas.offsetLeft, touche.clientY - canvas.offsetTop);
                            ctx.stroke();
                        },false)
                        canvas.addEventListener('touchend',function (event) {//手机离开屏幕的事件
                            ctx.closePath();

                        },false)

                    }
                },false)

            }
        </script>
</body>
</html>

原文章地址:http://blog.csdn.net/qq_38082304/article/details/78144153