draw dotted line - Javascript Canvas

Javascript examples for Canvas:Line

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

Description

draw dotted line

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>

body{ background-color: ivory; }
canvas{border:1px solid red;}
p{font-size:24px;}


      </style> 
      <script>
        $(function(){//from ww  w .  j  a  v  a  2 s  .c  o m
            var canvas=document.getElementById("canvas");
            var ctx=canvas.getContext("2d");
            DrawDottedLine(300,400,7,7,7,20,"green");
            function DrawDottedLine(x1,y1,x2,y2,dotRadius,dotCount,dotColor){
              var dx=x2-x1;
              var dy=y2-y1;
              var spaceX=dx/(dotCount-1);
              var spaceY=dy/(dotCount-1);
              var newX=x1;
              var newY=y1;
              for (var i=0;i<dotCount;i++){
                      drawDot(newX,newY,dotRadius,dotColor);
                      newX+=spaceX;
                      newY+=spaceY;
               }
               drawDot(x1,y1,3,"red");
               drawDot(x2,y2,3,"red");
            }
            function drawDot(x,y,dotRadius,dotColor){
                ctx.beginPath();
                ctx.arc(x,y, dotRadius, 0, 2 * Math.PI, false);
                ctx.fillStyle = dotColor;
                ctx.fill();
            }
        }); // end $(function(){});
    
      </script> 
   </head> 
   <body> 
      <canvas id="canvas" width="307" height="407"></canvas>  
   </body>
</html>

Related Tutorials