利用canvas实现一个简单的写字板，效果图图如下：

代码片段，其中#test是给canvas设置的id：

<script type="text/javascript">
        
        window.onload=function(){
            var canvas = document.querySelector("#test")
            if(canvas.getContext){
                var ctx = canvas.getContext("2d")
            }
            canvas.onmousedown = function(e){
                e = e || window.event //解决兼容性问题
                if(canvas.setCapture){
                    canvas.setCapture()
                }
                
                ctx.beginPath()
                //画笔开始的地方，注意减去的是canvas的offset
                ctx.moveTo(e.clientX-canvas.offsetLeft,e.clientY-canvas.offsetTop)
                document.onmousemove = function(e){
                    ctx.save()
                    ctx.strokeStyle = "skyblue"
                    ctx.lineWidth = 5
                    e = e || window.event
                    ctx.lineTo(e.clientX-canvas.offsetLeft,e.clientY-canvas.offsetTop)
                    ctx.stroke()
                    ctx.restore()                    
                    
                }
                document.onmouseup = function(){
                    document.onmousemove = document.onmouseup = null
                    if(document.releaseCapture){
                        document.releaseCapture()
                    }
                }
                
                return false  //阻止事件的默认行为
                
            }
            
        }
        
    </script>