search

Home  >  Q&A  >  body text

javascript - Help canvas to draw translucent mosaic?

My requirement is to allow users to use the mouse to mosaic the uploaded documents. My idea is to bind mouse events to the canvas and draw a translucent png to the canvas along the user's mouse pressing path. On the certificate, now I don’t want to use translucent PNG overlay, I want to directly use canvas to generate mosaics, please lead the way!

仅有的幸福仅有的幸福2752 days ago896

reply all(1)I'll reply

  • PHPz

    PHPz2017-06-07 09:26:40

    The algorithm shouldn’t be difficult:

    1. Divide the canvas area into a 100x100 grid

    2. Every time a mouse event occurs, determine which grid the mouse is in

    3. Draw the grid directly with fillRect as the average color in the grid (average the rgb of all points in the grid, or directly take the color of a certain point in the grid)

    This implements the basic algorithm of superimposed mosaic.

    reply
    0
  • Cancelreply