使用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函数,图片可以在浏览器中自由调整
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。