简单的HTML5在线画板

来源：互联网发布：h3c 5500 端口聚合编辑：程序博客网时间：2024/05/01 15:59

<!DOCTYPE html> <head> <meta charset=utf-8> <title>HTML5</title><script src="jquery-1.5.1.js"></script>    <style type="text/css">        #xu{border: 1px solid #ccc;}    </style></head><body><canvas id="xu" width="500" height="400" ></canvas><script type="text/javascript">  var canvas = document.getElementById("xu");  var xx = canvas.getContext("2d");  xx.lineWidth = 5;  xx.strokeStyle = "blue";  var flag = false;  //当鼠标按下时  $("#xu").mousedown(function (e) {      alert("aa");      var mouseX = e.pageX - this.offsetLeft;//获得当前页面的x坐标      var mouseY = e.pageY - this.offsetTop;//y      flag = true;      xx.moveTo(mouseX,mouseY);//起始位置  });  //当鼠标抬起时  $("#xu").mouseup(function (e) {    flag = false;  });  //当鼠标移动时  $("#xu").mousemove(function (e) {      var mouseX = e.pageX - this.offsetLeft;//获得当前页面的x坐标      var mouseY = e.pageY - this.offsetTop;//y      if(flag){          xx.lineTo(mouseX,mouseY);//终止位置          xx.stroke();//结束图形      }  });}</script></body> </html>

0 0