canvas2-text

canvas画板结合JS事件实现写字效果

    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    //鼠标按下来开始画线,此时鼠标的位置就是画线的起点
    canvas.onmousedown = function(e){
        var e = e || event;
        var startX = e.clientX - canvas.offsetLeft;
        var startY = e.clientY - canvas.offsetTop;
        context.beginPath();
        context.moveTo(startX,startY);
        // 线连到下一次鼠标经过的点
        canvas.onmousemove = function(e){
            var e = e || event;
            var endX = e.clientX - canvas.offsetLeft;
            var endY = e.clientY - canvas.offsetTop;
            context.lineTo(endX,endY)
            context.lineWidth = 5;
            context.strokeStyle = "aqua";
            context.stroke();
        }
    }
    document.onmouseup = function(){
        canvas.onmousemove = null;
    }

A0F76520-BD92-4A99-ACAB-EF3EE5B0ABC9.png