canvas鼠標點擊划線

本文轉載自查看原文 2016-10-18 19:25 4182

　　今天學習了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功能實現效果

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 鼠標點擊特效 vue 鼠標點擊tab 下划線跟隨效果（可用邊框實現這里用ref） Python 模擬鼠標點擊 Unity射線，鼠標點擊 js 鼠標點擊事件 MFC模擬鼠標點擊 html5中canvas的使用獲取鼠標點擊頁面上某點的RGB 鼠標點擊，鼠標經過，鼠標離開事件（練習） JavaScript 獲取鼠標點擊位置坐標 jQuery讓div顯示在鼠標點擊位置