Canvas画图

Html

Css

/*css内设置一些基本设置*/
* {
	margin:0;
	padding:0;
}
html,body {
	height:100%;
	overflow:hidden;
}
#test {
	background-color:red;
	margin:0;
	padding:0;
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
	margin:auto;
}

//加载事件中...
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

立即下载

Canvas画图



代码描述：使用鼠标绘制路径(带注释)

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

四没青年＃

相关代码

Canvas画图

最新