简单的HTML5在线画板

最新推荐文章于 2020-04-10 16:56:34 发布

never123450

最新推荐文章于 2020-04-10 16:56:34 发布

阅读量1.1w

点赞数 4

CC 4.0 BY-SA版权

分类专栏： HTML5 文章标签： html5

本文链接：https://blog.youkuaiyun.com/nevergiveup12345/article/details/47360633

HTML5 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用HTML5的Canvas元素结合jQuery实现基本的鼠标交互绘图功能。通过监听鼠标按下、移动和抬起事件，可以实现在画布上绘制线条的功能。此示例展示了如何设置画布的基本样式，并通过JavaScript进行事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>