jquery插件-firework,怎么给烟花加背景图片

使用drawImage()给烟花加背景

jquery插件-firework,怎么给烟花加背景图片_第1张图片
如图所示,但缺点是烟花上升的那条虚线被掩盖了,希望大神可以解决。

代码如下
先在 2d上下文下面(50行左右)创建一个img实例
// 设置背景图
img = new Image();
img.src = "images/timg2.jpg";

这时候如果我们直接让图像加载,会发现图像在浏览器打开时慢慢的褪去,重新变成黑色背景。
原因是因为它canvas每次都会清除画布,我们的背景被它清除了。

所以,我们要找到那个清除画布的函数( 差不多在200多行),在里面加drawImage()
var loop = function() {
            // update screen size
            if(SCREEN_WIDTH != window.innerWidth) {
                canvas.width = SCREEN_WIDTH = window.innerWidth;
            }
            if(SCREEN_HEIGHT != window.innerHeight) {
                canvas.height = SCREEN_HEIGHT = window.innerHeight;
            }

            // clear canvas
            context.fillStyle = "rgba(0, 0, 0, 0.05)";
            context.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
            context.drawImage(img, 0, 0,1536,760);
            var existingRockets = [];

关于drawImage()可以参考W3C网站,使用drawImage函数,图片可以在浏览器中自由调整

你可能感兴趣的:(前端,jquery插件,jquery)