塗鴉畫板，監聽touch事件，手機端

時間 2019-11-30
標籤塗鴉畫板監聽 touch 事件手機简体版
原文原文鏈接
經過監聽canvas上的touch事件，在canvas上做圖html
<!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>
複製代碼
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。