canvas鼠标点击划线

最新推荐文章于 2023-04-08 21:18:37 发布

weixin_30399797

最新推荐文章于 2023-04-08 21:18:37 发布

阅读量381

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/qingfengliuyun092815/p/5974565.html

版权

　　今天学习了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>