Home  >  Article  >  Web Front-end  >  An example tutorial about canvas-scratch-off

An example tutorial about canvas-scratch-off

零下一度
零下一度Original
2017-07-25 09:37:413316browse

Today, combined with the lottery game in the previous article,
use canvas to write a small game - scratch-off.
First, use canvas to make a canvas with a width and height of 200px. Then position a span tag on the canvas.

An example tutorial about canvas-scratch-off


## The effect is as follows

An example tutorial about canvas-scratch-off


Next, get the canvas tag, define an array, and then use canvas to draw a gray square to cover this part.

An example tutorial about canvas-scratch-off


##The effect is as follows



An example tutorial about canvas-scratch-off


Create a transparent circle using canvas. When the mouse moves, clear the gray layer on the canvas and display the text below (first prize).


An example tutorial about canvas-scratch-off


The effect is as follows

An example tutorial about canvas-scratch-off


Finally, we shuffle the array we just defined randomly, and then clear the gray layer to display different prizes.



An example tutorial about canvas-scratch-off


##The effect is as follows


An example tutorial about canvas-scratch-off

I hope this helps you, thank you!

The above is the detailed content of An example tutorial about canvas-scratch-off. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn