JavaScript graphic example: plane mosaic pattern

Time:2021-3-5

Mosaic with one or several plane figures of the same shape and size, and lay them together without any gap or overlap, is called plane mosaic of these figures.

1. A planar mosaic pattern realized by a polygon

We can use regular triangle, square or regular hexagon to realize plane mosaic.

(1) Tile with a square.

It’s easy to use square for plane mosaic. Write the following HTML code.

<a target="_blank" href="https://developpaper.com/tag/square/" title="View all posts in Square" target="_blank">Square</a> plane mosaic pattern

   var canvas = document.getElementById(‘myCanvas’);

   var ctx = canvas.getContext(‘2d’);

   var color=[‘#00FFFF’,’#00FF00′];

   var L=50;

   for (k=0;k<10;k++)

   {

      y=k*L;

      x0=0;

      for (i=0;i<10;i++)

      {

          x=x0+i*L;

          ctx.strokeStyle=”black”;

          ctx.strokeRect(x,y,L,L);

          ctx.fillStyle = color[(k+i)%2];

          ctx.fillRect(x,y,L,L);

      }

   }