HTML5 canvas elements make animated flower animations

No more nonsense, first code.

<!doctype>

Function Explanation:
Chanhua (): Draws a flower at a random position on the canvas using a bitmap . This function is called every 2s, and each call cleans up the canvas
Draw (): the bitmap for special effects processing, pixel processing, the use of Getimagedata (), to get a pixel on the canvas, the area of the pixel transparency processing. Place the processed pixels in the original position by Putimagedata (). This function is called every 0.08s, called 20 times, each time the transparency of the flower is enhanced, to the last time, the flower is almost transparent (almost transparent is accurate, because this time the flower transparency has reached 0.0000 ...) 0x, so it's not completely transparent, but it can't be seen.). 

Precautions:
1. Since there have been flowers in the place or there are residual pixels, when the same place again, the flowers will have an impact on the new flower, so each time the flowers are generated to clean up the canvas, using the Clearrect () function, width and height and canvas consistent.
2. Be sure to use the picture after the picture is loaded, img.onload=function () {...} To use the above function.
3.setTimeout ("Draw" ("+x+", "+y+") ", 80); Be sure to quote the draw () function, otherwise execute the function immediately, and no longer wait for 0.08s. Do not enclose the variable x, y in double quotes, which is treated as a normal string.
4. Remember that each flower's draw () function exits, otherwise it will be dimmed every 2s on the canvas and will not disappear. As shown in the following:



HTML5 canvas elements make animated flower animations