canvas在线画图

最新推荐文章于 2023-07-13 15:44:37 发布

sunqian_happy

最新推荐文章于 2023-07-13 15:44:37 发布

阅读量836

点赞数

分类专栏：页面相关

页面相关专栏收录该内容

48 篇文章 1 订阅

订阅专栏

在线画图

 
        <!DOCTYPE html> 
       
        <html> 
       
        <head lang= 
        "en" 
        > 
       
        <meta charset= 
        "UTF-8" 
        > 
       
        <title></title> 
       
        </head> 
       
        <body> 
       
        <canvas width= 
        "600"  
        height= 
        "600"  
        id= 
        "canvas"  
        style= 
        "border:1px solid red;" 
        ></canvas> 
       
        <script> 
       
        var  
        canvas = document.getElementById( 
        'canvas' 
        ); 
       
        var  
        cxt = canvas.getContext( 
        '2d' 
        ); 
       
        canvas.onmousedown =  
        function 
        (ev){ 
       
        var  
        x = ev.clientX - canvas.offsetLeft; 
       
        var  
        y = ev.clientY - canvas.offsetTop; 
       
        cxt.beginPath(); 
       
        cxt.moveTo(x, y); 
       
        document.onmousemove =  
        function 
        (ev){ 
       
        var  
        x = ev.clientX - canvas.offsetLeft; 
       
        var  
        y = ev.clientY - canvas.offsetTop; 
       
        cxt.lineTo(x, y); 
       
        cxt.stroke(); 
       
        }; 
       
        }; 
       
        document.onmouseup =  
        function 
        (){ 
       
        cxt.closePath(); 
       
        document.onmousemove =  
        null 
        ; 
       
        }; 
       
        </script> 
       
        </body> 
       
        </html>