Canvas画图效果

浏览：1100次- 评论：4次- 发布时间：2019-03-30

Html

Css

//加载事件中...
window.onload = function() {
    //首先拿到canvas画布
    var testNode = document.querySelector("#test");
    //判断这个画笔是否存在
    if (testNode.getContext) {
        //如果存在，那么取出这个画笔
        var ctx = testNode.getContext("2d");
    }
    //在画布的鼠标按下事件中
    testNode.onmousedown = function(ev) {
        ev = ev || window.event;
        if (testNode.setCapture) {
            testNode.setCapture();
        }
        ctx.beginPath();
        //点出第一个点
        ctx.moveTo(ev.clientX - testNode.offsetLeft, ev.clientY - testNode.offsetTop);
        //鼠标按下的同时设置鼠标移动move事件
        document.onmousemove = function(ev) {
            ev = ev || window.event;
            //绘制路径
            ctx.lineTo(ev.clientX - testNode.offsetLeft, ev.clientY - testNode.offsetTop);
            ctx.stroke();
        }
        //最后在鼠标抬起事件中将画笔抬起
        document.onmouseup = function() {
            document.onmousemove = null;
            document.onmouseup = null;
            if (document.releaseCapture) {
                document.releaseCapture();
            }
        }
        return false;
    }
}

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3