涂鸦画板，监听touch事件，手机端

最新推荐文章于 2023-04-17 20:00:00 发布

weixin_34096182

最新推荐文章于 2023-04-17 20:00:00 发布

阅读量266

点赞数 1

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5ca1c3fbf265da307d448b5e

版权

通过监听canvas上的touch事件，在canvas上作图

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <title>涂鸦画板</title>
        <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
        <style>
            body{background-color: #EBEBEB;}
            canvas{background-color: #FFFFFF;}
        </style>
    </head>
    <body>
        <h3 class="pos_abs txt">请在这里画图</h3>
       <canvas id="myCanvas" width="400" height="200" class="pos_abs"></canvas>
       <button id="sure-btn" class="pos_abs">确认</button>
       <button id="reast-btn" class="pos_abs">重画</button>
       <h3>图片显示在这里</h3>
       <img src="" id="showImg"/>
       <script>
        var canvas = document.getElementById("myCanvas");
        $(function(){
            $("#reast-btn").click(function(){
                clearArea();
            });
            $("#sure-btn").click(function(){
                if(isCanvasBlank(canvas)){
                    alert("请在画布画图");
                    return false;
                }
                var img = convertCanvasToImage(canvas);
                $("#showImg").attr("src",img);
            });
            canvas.addEventListener('touchstart', onTouchStart, false);
            canvas.addEventListener('touchmove', onTouchMove, false);

        })

        //是否支持触摸
        //上一次触摸坐标
        var lastX;
        var lastY;

        var ctx =canvas.getContext("2d");
        var _top = canvas.offsetTop;//画布的top值；
        var _left = canvas.offsetLeft;//画布的left值
        console.log(_top);
        ctx.lineWidth=10;//画笔粗细
        ctx.strokeStyle="#FF0000";//画笔颜色

        //触摸开始事件
        function onTouchStart(event) {
            event.preventDefault();
            lastX=event.touches[0].pageX;
            lastY=event.touches[0].pageY;
            drawRound(lastX-_left,lastY-_top);

        }

        //触摸滑动事件
        function onTouchMove(event) {
            try
            {
              event.preventDefault();
              drawLine(lastX-_left,lastY-_top,event.touches[0].pageX-_left,event.touches[0].pageY-_top);
              lastX=event.touches[0].pageX;
              lastY=event.touches[0].pageY;
            }
            catch(err){
                alert( err.description);
            }

        }
        //画圆
        function drawRound(x,y)
        {
            ctx.fillStyle="#FF0000";
            ctx.beginPath();
            ctx.arc(x,y,5,0,Math.PI*2,true);
            ctx.closePath();
            ctx.fill();
        }
        //画线
        function drawLine(startX,startY,endX,endY)
        {
            ctx.beginPath();
            ctx.lineCap="round";
            ctx.moveTo(startX,startY);
            ctx.lineTo(endX,endY);
            ctx.stroke();
        }
        //清除

        function clearArea() {
            // Use the identity matrix while clearing the canvas
        //  alert("")
            ctx.setTransform(1, 0, 0, 1, 0, 0);
            ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
        }
        //生成图片
        function convertCanvasToImage(canvas) {
            var Pic = canvas.toDataURL("image/png");
        //  Pic = Pic.replace(/^data:image\/(png|jpg);base64,/, "");
            return Pic;
        }
        //判断画布内是否为空
        function isCanvasBlank(canvas) {
            var blank = document.createElement('canvas');
            blank.width = canvas.width;
            blank.height = canvas.height;
            return canvas.toDataURL() == blank.toDataURL();
        }
       </script>
    </body>
</html>
复制代码