简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > Tutorial H5 > teks badan

关于canvas的一个实例教程--刮刮乐

零下一度
Lepaskan： 2017-07-25 09:37:41
asal
3290 orang telah melayarinya

今天，结合上一篇文章的抽奖小游戏，
用canvas来写一个小游戏——刮刮乐。
首先，用canvas做一个画布，宽高各为200px。然后再把一个span标签定位到画布上。

关于canvas的一个实例教程--刮刮乐



         效果如下所示

关于canvas的一个实例教程--刮刮乐



 接下来获取一下canvas标签，定义一个数组，之后用canvas画一个灰色的正方形把这部分给盖住。

关于canvas的一个实例教程--刮刮乐



效果如下

关于canvas的一个实例教程--刮刮乐



用canvas创建一个透明的圆，当鼠标移动时，清除canvas上的灰色图层，显示下面的文字（一等奖）。

关于canvas的一个实例教程--刮刮乐


效果如下

关于canvas的一个实例教程--刮刮乐



最后，我们让刚开始定义的数组打乱随机，然后要清除灰色的图层时，显示不同的几等奖。

关于canvas的一个实例教程--刮刮乐



效果如下

关于canvas的一个实例教程--刮刮乐


希望对各位有所帮助，谢谢！

Atas ialah kandungan terperinci 关于canvas的一个实例教程--刮刮乐. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
canvas 实例 教程
sumber：php.cn
Artikel sebelumnya：HTML5的学习路线分析 Artikel seterusnya：关于html5如何在canvas中插入图片的示例详解
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Bolehkah fail PDF menjalankan HTML5 dan Javascript? Saya mempunyai idea bodoh untuk mencuba dan membuat program yang tidak akan disekat pada m...
daripada 2024-04-05 12:57:00
0
1
456
Dapatkan *dua* nilai ketinggian kanvas? Saya cuba mendapatkan dua nilai ketinggian kanvas ini. <canvaswidth="886"heig...
daripada 2024-04-05 09:32:33
0
1
1360
Bagaimana untuk mengeksport jpg daripada berbilang kanvas Saya mempunyai berbilang kanvas yang digunakan sebagai lapisan. canvasc1=backgroundimage.c...
daripada 2024-04-03 21:02:43
0
1
319
Mengapa setiap kali saya menyimpan projek Vite React saya, elemen kanvas baharu ditambahkan pada isi halaman dan bukannya menggantikan elemen kanvas sedia ada? Saya cuba mula belajar ThreeJs (saya juga baru dalam pembangunan web Javascript). Selepas ...
daripada 2024-03-30 09:57:49
0
1
396
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！