canvas畫板（滑鼠和觸摸）-有解無憂

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>canves</title>
    <style>
        #canvas  {
            cursor:url(../images/pen.png),crosshair;
        }
        #canvasdiv{
            border: 1px solid #bcbcbc;
        }
    </style>
</head>
<body>
<div id="canvasdiv">
    <canvas id="canvas"></canvas>
</div>
<button type="button" class="layui-btn layui-btn-normal" id="clear" style="display: none" onclick="clear_all()" onsubmit="return false;"></button>
</body>
<script type="text/javascript">
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var base64data='';
    canvas.width="320"
    canvas.height="240"

    //頁面不出現滾動滑動
    $("html,body").css("overflow","hidden").css("height","100%");
    document.body.addEventListener('touchmove', self.welcomeShowedListener, false);

    //畫一個黑色矩形
    ctx.fillStyle = "rgba(225,225,225,0)";//繪制填充顏色 透明色
    ctx.fillRect(0, 0,320,240);//繪制一個被填充的矩形

    //按下標記
    var onoff = false;
    //定義起始位置
    var oldx = 0;
    var oldy = 0;
    //設定畫筆顏色默認為黑色
    var linecolor = "black";
    //畫筆寬度默認為4
    var linw = 4;

    //判斷是觸摸還是滑鼠
    if (document.body.ontouchstart !== undefined) {
        //執行touch代碼
        // 手指按下
        canvas.ontouchstart = e => {
            painting = true
            const event = e.touches[0]
            ctx.lineCap = 'round'
            ctx.lineJoin = 'round'
            const x = event.pageX
            const y = event.pageY
            ctx.beginPath()
            ctx.moveTo(x, y)
            ctx.lineWidth = linw
            ctx.strokeStyle = linecolor
        }
        // 手指移動
        canvas.ontouchmove = e => {
            if (!painting) {
                return
            }
            const event = e.touches[0]
            const x = event.pageX
            const y = event.pageY
            ctx.lineTo(x, y)
            ctx.stroke()
        }
        // 手指抬起
        canvas.ontouchend = () => {
            if (!painting) {
                return false
            }
            painting = false
            ctx.closePath()
        }
        // 手指離開區域
        ontouchcancel = () => {
            if (!painting) {
                return false
            }
            painting = false
            ctx.closePath()
        }
    } else {
        //滑鼠移動事件，事件系結
        // 執行mouse代碼
        canvas.addEventListener("mousemove", draw);
        canvas.addEventListener("mousedown", down);
        canvas.addEventListener("mouseup", up);
    }


    // 下筆時按下標記打開，給oldx、oldy賦值
    function down(event) {
        onoff = true;
        oldx = event.pageX;
        oldy = event.pageY;
    }

    //檢測滑鼠離開后，按下標記關閉
    function up() {
        onoff = false;
    }

    //畫圖，按下標記打開
    function draw(event) {
        if (onoff == true) {
            var newx = event.pageX ;
            var newy = event.pageY;
            // 起始一條路徑，或重置當前路徑，
            ctx.beginPath();
            // 把路徑移動到畫布中的指定點，不創建線條，
            ctx.moveTo(oldx, oldy);
            // 添加一個新點，然后在畫布中創建從該點到最后指定點的線條，
            ctx.lineTo(newx, newy);
            // 設定或回傳用于筆觸的顏色、漸變或模式，
            ctx.strokeStyle = linecolor;
            // 設定或回傳當前的線條寬度，
            ctx.lineWidth = linw;
            // 設定或回傳線條的結束端點樣式，
            ctx.lineCap = "round";
            // 繪制已定義的路徑，
            ctx.stroke();
            oldx = newx;
            oldy = newy;
        }
    }

    // 生成圖片
    function generate_picture() {
            const dataImg = new Image();
            // canvas生成圖片
            dataImg.src = canvas.toDataURL('image/png');
    };

    //清理畫布
    function clear_all() {
            ctx.fillStyle = 'rgba(225,225,225,0)';
            ctx.fillRect(0, 0, 320,240);
    };

    // 下載圖片
    function download_picture() {
        const dataImg = new Image();
        dataImg.src = canvas.toDataURL('image/png');
        document.querySelector('#image').appendChild(dataImg)
        const alink = document.createElement("a");
        alink.href = dataImg.src;
        alink.download = "testImg.jpg";
        alink.click();
    }
</script>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/543953.html
標籤：HTML5
上一篇：手機端H5 實作自定義拍照界面
下一篇：藍牙-低功耗中心設備