match horizontal lines - Javascript Canvas

Javascript examples for Canvas:Line

  1. HOME
  2. Javascript
  3. Canvas
  4. Line

Description

match horizontal lines

Demo Code

ResultView the demo in separate window 

<!doctype html>
<html>
   <head> 
      <!-- reset css --> 
      <script type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script> 
      <style>

#canvas{border:1px solid red;}

      </style> 
      <script>
$(function(){//from w  ww .j a  v a  2s  .  c  o m
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(20,20);
    ctx.lineTo(20,220);
    ctx.lineTo(80,220);
    ctx.closePath();
    ctx.fill();
    ctx.beginPath();
    ctx.moveTo(100,100);
    ctx.lineTo(65,125);
    ctx.lineTo(100,150);
    ctx.lineTo(135,125);
    ctx.closePath();
    ctx.fill();
    ctx.fillRect(175,0,30,canvas.height);
    // get the pixel-data array
    var imageData = ctx.getImageData(0,0,canvas.width,canvas.height);
    var data = imageData.data;
    // set up variables to hold the results
    var maxLength=0;
    var maxY;
    var maxStartX;
    var maxEndX;
    // step through each horizontal line
    for(var y = 0; y < canvas.height; y++) {
        var continuous=0;
        for(var x = 0; x < canvas.width; x++) {
            if(data[((canvas.width * y) + x) * 4 + 3]>0){
                // calculate this line's maximum continuouse line
                continuous++;
            }else{
                // if this line's line is longer than maxLength
                if(continuous>maxLength){
                    // replace maxLength with this line's data
                    maxLength=continuous;
                    maxY=y+1;
                    maxEndX=x-1;
                    maxStartX=maxEndX-continuous+1;
                }
                continuous=0;
            }
        }
    }
    ctx.beginPath();
    ctx.moveTo(maxStartX,maxY);
    ctx.lineTo(maxEndX,maxY);
    ctx.strokeStyle="orange";
    ctx.lineWidth=1;
    ctx.stroke();
    $("#results").text(maxLength+"px long from ["+maxStartX+"/"+maxY+"] to ["+maxEndX+"/"+maxY+"]");
}); // end $(function(){});

      </script> 
   </head> 
   <body> 
      <p>The longest continuous horizontal line:</p> 
      <p>(Highlighted by the orange line)</p> 
      <p id="results"></p> 
      <canvas id="canvas" width="300" height="250"></canvas>  
   </body>
</html>

Related Tutorials