【七夕情人节特效】-- canvas实现满屏爱心

 Canvas简介：

Canvas是HTML5的一个新特性，canvas又叫做画板。我们可以在canvas上绘制我们需要的图形。anvas本身是一个HTML元素，需要HTML元素的配合高度和宽度属性而定义出的一块可绘制区域，定义区域之后使用JavaScript的脚本绘制图像的HTML元素。

• canvas 是一个矩形区域的画布，可以用 JavaScript 在上面绘画。控制其每一个像素。
• canvas 标签使用 JavaScript 在网页上绘制图像，本身不具备绘图功能。
• canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
• HTML5 之前的 web 页面只能用一些固定样式的标签：比如 p、div、h1 等
• canvas是原生js对象，不建议使用jq

作用：它可以基本的绘制图形，进一步的制作照片，绘制动画，更进一步可以处理和渲染视频。

canvas有两个属性，一个是宽度（width），一个是高度（height）。宽度和高度可以使用内联的属性，如下所示：

    <canvas width="300px" height="150px" id="canvas">
        This is Canvas
        <img src="./backup.jpg" alt=""> 
    </canvas>

注意：低版本浏览器可能会不支持，且结尾的</canvas>标签不可省略。

没有设置宽高的画布默认width=300px；height=150px；

Canvas小案例：

满屏爱心滚动出现效果：

 实现代码如下;