canvas 画图签名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>canvas</title>
</head>
<body>
    <canvas id="canvas" width="1000" height="1000"></canvas>
</body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    var canvas = document.getElementById('canvas');
    if(typeof G_vmlCanvasManager != 'undefined') {
        canvas = G_vmlCanvasManager.initElement(canvas);
    }
    var context = canvas.getContext("2d");

    //鼠标按下事件(Mouse Down Event)
    $('#canvas').mousedown(function(e){
        paint = true;
        addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
        redraw();
    });

    //鼠标移动事件(Mouse Move Event)
    $('#canvas').mousemove(function(e){
        if(paint){//是不是按下了鼠标
            addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
            redraw();
        }
    });

    //鼠标松开事件(Mouse Up Event)
    $('#canvas').mouseup(function(e){
        paint = false;
    });

    //鼠标移开事件(Mouse Leave Event)
    $('#canvas').mouseleave(function(e){
        paint = false;
    });

    //addClick方法   记录鼠标坐标点
    var clickX = new Array();
    var clickY = new Array();
    var clickDrag = new Array();
    var paint;
    
    function addClick(x, y, dragging){
        clickX.push(x);
        clickY.push(y);
        clickDrag.push(dragging);
    }

    //redraw方法   redraw方法是每次都清空画板，然后重新把所有的点都画过
    function redraw(){
        //canvas.width = canvas.width; // Clears the canvas
        context.strokeStyle = "#df4b26";
        context.lineJoin = "round";
        context.lineWidth = 5;
    
        for(var i=0; i < clickX.length; i++){
            context.beginPath();
            if(clickDrag[i] && i){//当是拖动而且i!=0时，从上一个点开始画线。
            context.moveTo(clickX[i-1], clickY[i-1]);
            }else{
            context.moveTo(clickX[i]-1, clickY[i]);
            }
            context.lineTo(clickX[i], clickY[i]);
            context.closePath();
            context.stroke();
        }
    }
</script>
</html>
canvas 画图 签名

猜你喜欢
