Canvas入门笔记-实现极简画笔

今天学习了Html5 Canvas入门，已经有大神写得很详细了http://www.cnblogs.com/tim-li/archive/2012/08/06/2580252.html#8

在学习过后自己写了一个简单的扩展

实现画板画笔功能，效果如下：

<div>
    <!--画板-->
    <canvas id="box1" height="400" width="400" style="background-color: antiquewhite"></canvas>
    <!--保存并显示鼠标X轴位置-->
    <label id="lab_X"></label>
    <!--保存并显示鼠标Y轴位置-->
    <label id="lab_Y"></label>
</div>

$(function () {
            var canvas = document.getElementById("box1");
            if (canvas == null)
                return false;
            var context = canvas.getContext("2d");
            //标记开始书写
            var start = false;
            $(canvas).mousemove(function (event) {
                //显示当前鼠标位置
                $("#lab_X").text(event.pageX);
                $("#lab_Y").text(event.pageY);
                if (start) {
                    context.lineTo(event.pageX, event.pageY);
                    context.stroke();
                }
            });
            //鼠标按下，开始书写
            $(canvas).mousedown(function () {
                context.beginPath();
                context.moveTo($("#lab_X").text(), $("#lab_Y").text());
                start = true;
            });
            //鼠标抬起，结束书写
            $(canvas).mouseup(function () {

                start = false;
                context.closePath();
            });
        });