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();

             });

         });