canvas 在线画图

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">/*画图大师来了*/#cans{border:1px solid red;}</style><script type="text/javascript" src="../js/jquery.min.js"></script><script type="text/javascript">$().ready(function () {var d=$("#cans").get(0).getContext("2d");d.lineWidth=5;//  画笔粗细
            d.strokeStyle="blue"; // 画笔颜色var control=false; // 控制画
            $("#cans").bind("mousedown", function (e) {
//                alert(e.pageX); //鼠标坐标
//                alert(this.offsetLeft);   //指 $("#cans") 边框与浏览器窗口左边的距离var mouseX= e.pageX-this.offsetLeft;var mouseY= e.pageY-this.offsetTop;control=true;  // 鼠标按下时可以画
                d.moveTo(mouseX,mouseY);   // 开始画  起止位置
});$("#cans").bind("mouseup", function (e) {control=false;});$("#cans").bind("mousemove", function (e) {if(control){var mouseX= e.pageX-this.offsetLeft;var mouseY= e.pageY-this.offsetTop;d.lineTo(mouseX,mouseY); // 终止位置
                    d.stroke();  // 结束图形
                }});});</script>
</head>
<body>
<canvas id="cans" width="200" height="200">浏览器不支持canvas</canvas></body>
</html>