lovecoding
/
W250511


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #can{
            background-color: #000;
        }
    </style>
</head>
<body>
    <canvas id="can" width="500" height="500"></canvas>
    <script>
        // 获取画布
        var oCan = document.getElementById("can");
        // 初始化画布
        var oCtx = oCan.getContext("2d");

        // 设置画笔样式
        oCtx.lineWidth = 3;
        oCtx.strokeStyle = '#fff';

        // 绑定事件
        oCan.onmousedown = function(e){
            // 落笔
            oCtx.moveTo(e.clientX,e.clientY);
            // 移动事件
            oCan.onmousemove = function(e){
                // 移动画笔
                oCtx.lineTo(e.clientX,e.clientY);
                // 绘制
                oCtx.stroke();
            }
        }
        // 鼠标抬起
        oCan.onmouseup = function(){
            // 停止绘画
            oCan.onmousemove = null;
        }
    </script>
</body>
</html>