我需要一个简单的HTML5 Fill Preloader（心形进度条）

Question

我正在使用Flash CC 2015.我想在HTML5 Canvas中制作预加载器，就像我在AS3中使用的那样。我正在逐步转换我的“flash网站”，所以我从预加载器开始。

目前我在flash AS3中使用以下内容：

stop();

this.addEventListener(Event.ENTER_FRAME, loading);

function loading(e:Event):void {

    var total:Number = this.stage.loaderInfo.bytesTotal;
    var loaded:Number = this.stage.loaderInfo.bytesLoaded;

    bar_mc.scaleX = loaded/total;

    if (total == loaded) {
        play();
        this.removeEventListener(Event.ENTER_FRAME, loading);
    }
}

这是一个粉红色填充的心脏轮廓。我用了一个名为bar_mc的面具进行扩展，露出了它后面的心形填充物。

想要一个像HTML5 Canvas一样的人。如果可能，我们将不胜感激。

您可以在hugclub.net上看到当前的实际操作（除非您的互联网太快，请尝试移动）谢谢大家！

PS - HTML5的当前进度条教程仅适用于嵌入式电影，而不是网站的实际开放，所以我现在问:)希望它也能帮助其他人。