使用H5开发一个网页版的节拍器

前言

给女儿买过一个机械版的节拍器,被儿子给弄坏了,尝试去市场找过应用版的节拍器,下载过几个之后发现都存在一个问题,广告特别严重.正好最近手上的事情不多,自己作为一个java后端开发,想试试能否自己写一个节拍器出来,给女儿使用.最初想的是使用源生安卓或IOS来实现,或者是uniapp实现,可是自己没有相关的开发经验,学习成本并不低.后面想着反正自己最近在考虑做一些小游戏,要不去现学个游戏引擎来开发?看过unity和godot之后还是放弃了,首先没有那么多学习时间,自己想要做的游戏好像也不用那么复杂,还要考虑多端的问题,似乎使用我多年前了解过的h5里的canvas就能实现,还不用考虑平台问题,于是立即决定开始开发.

设计

在网络上找了一些素材,选了一个看起来就比较精简的,容易被canvas画出来的版本.出自【自用】节拍器（60-208BPM）_哔哩哔哩_bilibili

如图:

大体上使用这个设计,计算好整体比例,比如我这里用的是宽/高=0.62(因为没有考虑指针摆动的情况,后面会被这个坑一下...).画图时全部采用比例来画,这样在网页缩放时不至于节拍器比例失调.

音效素材下载于熊猫办公,使用音频软件剪辑.

万事具备,开始开发.

开发

首先定义好一个画布,设置好大小,我们会在这个画布上开始画画.

//css
* {
    margin: 0;
    pad