使用drawImage()給煙花加背景

如圖所示，但缺點是煙花上升的那條虛線被掩蓋了，希望大神可以解決。

代碼如下
先在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函數，圖片可以在瀏覽器中自由調整