JavaScript Canvas 画板(线条)-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_1717/article/details/82239455

本文介绍了一个基于HTML、CSS、JavaScript和jQuery的在线绘图应用，通过使用Canvas元素和jQuery实现基本的画布操作，包括点击绘制、拖拽绘制等功能。详细解释了如何在画布上响应鼠标事件，并在不同位置绘制线条。此应用适用于艺术创作、教学演示或简单的图形设计。

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


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>  
<style type="text/css">
canvas{
   border:1px solid green;
}
</style>
</head>  
<body>  
  <canvas id="canvas" width="490" height="220"></canvas>
  <script type="text/javascript">
//BEGIN LIBRARY CODE
   var canvas = document.getElementById('canvas');
   if(typeof G_vmlCanvasManager != 'undefined') {
   	canvas = G_vmlCanvasManager.initElement(canvas);
   }
   context = canvas.getContext("2d");
   $('#canvas').mousedown(function(e){
	   var mouseX = e.pageX - this.offsetLeft;
	   var mouseY = e.pageY - this.offsetTop;

	   paint = true;
	   addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
	   redraw();
	 });
   $('#canvas').mousemove(function(e){
	   if(paint){
	     addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
	     redraw();
	   }
	 });
   $('#canvas').mouseup(function(e){
	   paint = false;
	 });
   $('#canvas').mouseleave(function(e){
	   paint = false;
	 });
   var clickX = new Array();
   var clickY = new Array();
   var clickDrag = new Array();
   var paint;

   function addClick(x, y, dragging)
   {
     clickX.push(x);
     clickY.push(y);
     clickDrag.push(dragging);
   }
   function redraw(){
	   canvas.width = canvas.width; // Clears the canvas

	   context.strokeStyle = "#df4b26";
	   context.lineJoin = "round";
	   context.lineWidth = 5;

	   for(var i=0; i < clickX.length; i++)
	   {		
	     context.beginPath();
	     if(clickDrag[i] && i){
	       context.moveTo(clickX[i-1], clickY[i-1]);
	      }else{
	        context.moveTo(clickX[i]-1, clickY[i]);
	      }
	      context.lineTo(clickX[i], clickY[i]);
	      context.closePath();
	      context.stroke();
	   }
	 }


  </script>  
</body>  
</html>