canvas基础—01demo之（鼠标划线和方块制动）

秒速五厘米 2022-03-20 09:47 95阅读 0赞

### 1.鼠标划线 ###

<!DOCTYPE html>
    <html>
    <head> 
    <meta charset="utf-8"> 
    <title>鼠标画线</title>
    <style>
    body{background: black}
    #c1{background: white}
    span{color: white}
    </style> 
    <script type="text/javascript">
        window.onload = function(){
            var oC = document.getElementById('c1');
            var oGC = oC.getContext('2d');//webgl:3D绘图
            oC.onmousedown = function(ev){  //鼠标按下
                var ev = ev || window.event
                // offsetLeft：元素的左外边框至包含元素的左内边框之间的像素距离
                //canvas距离屏幕的距离（oC.offsetLeft,oC.offsetTop）
                //鼠标按下的初始坐标点，此坐标点是相对于屏幕的,所以还需要减掉canvas距离屏幕得距离
                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)
                    console.log('lineTo-----------')
                    console.log(ev.clientX-oC.offsetLeft,ev.clientY-oC.offsetTop)
                    oGC.stroke()
                }
                document.onmouseup = function(ev){
                    document.onmousemove = null
                    document.onmouseup = null
                }
            }
        }
    </script>
    </head>
    <body>
    
    <canvas id="c1" width="400" height="400">
    	<span>不支持canvas浏览器</span>
    </canvas>
    
    </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70][]

### 2.方块移动  ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1][]

3.注意点

<body>
    
    <canvas id="c1" width="400" height="400">
    	<span>不支持canvas浏览器</span>
    </canvas>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70]: /images/20220320/7b07c21e4b814b5499c605c5124147fa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1]: /images/20220320/72463c0e9daa4b9193c21d246463fba2.png