JavaScript Canvas画板(線)

2637 ワード

JavaScript

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

Javascriptキーワード