在画布上多次翻转和镜像图像-Flippingandmirroringanimagemultipletimesonacanvas

Flipping an image horizontally (left to right) involves:

水平翻转图像(从左到右)涉及:

• translate to the horizontal middle of the image. This sets the rotation point as the horizontal middle of the image. It does this by moving the canvas's [0,0] origin horizontally to the middle of the image.

  转换为图像的水平中间。这将旋转点设置为图像的水平中间。它通过将画布的[0,0]原点水平移动到图像的中间来实现。

  context.translate(x+img.width/2,0);
  

• Use scale to flip the image horizontally. This causes the image to be drawn as a horizontal mirror of itself.

  使用比例水平翻转图像。这会导致图像被绘制为自身的水平镜像。

  context.scale(-1,1);
  

• drawImage the image offset by half the image's width. This offset is necessary because context.translate has moved the [0,0] to the midpoint of the image so the image must be pulled leftward so that it's drawn at the desired X location.

  drawImage图像偏移图像宽度的一半。此偏移是必要的,因为context.translate已将[0,0]移动到图像的中点,因此必须向左拉动图像,以便在所需的X位置绘制图像。

  context.drawImage(img,-img.width/2,y);
  

body{ background-color: ivory; }
#canvas{border:1px solid red;}