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删除。

猜您在找 canvas在鼠标点击处绘制心形 Canvas绘制心电图——画线测量距离（Canvas鼠标点击画线+标签跟随鼠标移动）鼠标点击特效鼠标点击特效鼠标点击特效 vue 鼠标点击tab 下划线跟随效果（可用边框实现这里用ref） Python 模拟鼠标点击 Unity射线，鼠标点击 js 鼠标点击事件 MFC模拟鼠标点击