webturing
/
ChineseHandWritingApp


			
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
							<!DOCTYPE html>
<head>
    <meta charset=utf-8>
    <title>HTML5</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
    <script src="canvas2image.js"></script>
    <style type="text/css">
        #xu {
            border: 1px solid #ccc;
        }
    </style>
    <button onclick="savePic()">save</button>
    <img src="" id='screen' alt="will show here">
</head>
<body>
<canvas id="xu" width="500" height="400"></canvas>

<script type="text/javascript">
    var canvas = document.getElementById("xu");
    var xx = canvas.getContext("2d");
    xx.lineWidth = 5;
    xx.strokeStyle = "blue";
    var flag = false;

    //当鼠标按下时
    $("#xu").mousedown(function (e) {
        alert("aa");
        var mouseX = e.pageX - this.offsetLeft;//获得当前页面的x坐标
        var mouseY = e.pageY - this.offsetTop;//y
        flag = true;
        xx.moveTo(mouseX, mouseY);//起始位置

    });
    //当鼠标抬起时
    $("#xu").mouseup(function (e) {
        flag = false;
    });
    //当鼠标移动时
    $("#xu").mousemove(function (e) {

        var mouseX = e.pageX - this.offsetLeft;//获得当前页面的x坐标
        var mouseY = e.pageY - this.offsetTop;//y

        if (flag) {
            xx.lineTo(mouseX, mouseY);//终止位置
            xx.stroke();//结束图形
        }
    })
    ;


    function savePic() {
        var image=new Image();
        image.src= document.getElementById("xu").toDataURL("image/png");
        document.getElementById('screen').src=image.src;
    }


</script>

</body>
</html>