HTML5 Canvas 制作一个“在线画板”

来源：互联网发布：java serverlet 调用编辑：程序博客网时间：2024/05/01 13:05
<!DOCTYPE html>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>PHP100.com HTML5视频教程-canvas-在线画板</title>  <script src="http://ajax.googleapis.com/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>
0 0