1.效果
2.代码
源代码是用html+css+js实现的，代码如下：
点击查看代码
```html Document .heart { width: 10px; height: 10px; position: fixed; background: #f00; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); } .heart:after, .heart:before { content: ''; width: inherit; height: inherit; background: inherit; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; position: fixed; } .heart:after { top: -5px; } .heart:before { left: -5px; } ```后面我用canvas重新写了一份，不再使用css绘制爱心。源代码如下：
点击查看代码
```html Document ```3.实现思路
3.1 css版
这个实现点击出现爱心是通过点击时向body添加一个class名为heart的div元素，同时给这个div一个初始的alpha（透明度）值，每次requestAnimation时，alpha的值减少0.004，当alpha降到0以下时，从body中删除这个div。代码如下：
3.2 canvas版
重写的canvas方法实现大致思路差不多，不过少了个添加、删除div的过程。当透明度小于0时，直接从所有心的列表中删除即可。
canvas版的多了一个在指定位置绘制爱心的方法(drawHeart)，通过传入鼠标的点击位置(x,y)、当前的缩放值以及这颗心的颜色，通过canvas的路径绘制api画出了爱心的路径，最后使用fill()方法画出爱心。不过这里注意的是，canvas的缩放只能缩放整个canvas画布，需要在绘制每个爱心的时候进行一个save()和restore()操作。这样每颗爱心的缩放值就会不相互干扰了。代码如下：
