canvas鼠标点击划线

　　今天学习了canvas，打算写一个鼠标划线的效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body{
            background-color: black;
        }
        canvas{
            background-color: white;
        }
    </style>
    <script type="text/javascript">
        window.onload= function(){
            var oc= document.getElementById('c1');
            var ogc=oc.getContext('2d');
            oc.onmousedown = function(ev){
                var ev=ev || window.event;
                ogc.moveTo(ev.clientX-oc.offsetLeft,ev.clientY-oc.offsetTop);
                document.onmousemove = function(ev){
                    var ev = ev || window.event;
                    ogc.lineTo(ev.clientX-oc.offsetLeft,ev.clientY-oc.offsetTop);
                    ogc.stroke();
                };
                document.onmouseup = function(){
                    document.onmousemove = null;
                    document.onmouseup = null;
                };

            }
        }
    </script>
</head>
<body>
    <canvas id="c1" width="400" height="400">
        
    </canvas>
    
</body>
</html>

如上通过简单的moveTo lineTo功能实现效果

 

posted @ 2016-10-18 19:25  清风·流云  阅读(5353)  评论(0)  编辑  收藏  举报