<!DOCTYPE html><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> HTML5视频教程-canvas-在线画板</title><script src="/ajax/libs/jquery/1.7.1/jquery.min.js"></script><style type="text/css">#php100{ border:1px solid #ccc;} /* 画布的边 */</style></head><body><canvas id="php100" width="500" height="400"></canvas><!-- 画布 --><script type="text/javascript">var canvas = document.getElementById('php100'); //获取画布var p100=canvas.getContext("2d"); //设置模式p100.lineWidth=10; //线粗p100.strokeStyle="red"; //线条填充样式var pp=false; //开始为false 当鼠标按下时才能画图//当鼠标按下时 pp为true才能画图$("#php100").mousedown(function(e){ //鼠标按下事件 e自定义的变量 表示获得当前鼠标的对象var mouseX = e.pageX - this.offsetLeft; //当前页面鼠标的X轴坐标 - 当前画布距离页面左边界的距离var mouseY = e.pageY - this.offsetTop;pp=true;p100.moveTo(mouseX,mouseY); //起始位置});//当鼠标抬起时 pp设置为false 结束画图$("#php100").mouseup(function(e){ //鼠标弹起事件pp=false; });//当鼠标移动时 $("#php100").mousemove(function(e){ //鼠标移动事件//重新获得鼠标当前的坐标var mouseX = e.pageX - this.offsetLeft;var mouseY = e.pageY - this.offsetTop;if(pp){p100.lineTo(mouseX,mouseY); //终止位置p100.stroke();//结束图形}});</script></body></html>
