先看看烟花自动播放效果:
实现步骤如下:
1.将html与body填满整个屏幕
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
2.获取画布,设置宽高,调用getContext方法
var myCanvas = document.getElementsByTagName("canvas")[0];
var ctx = myCanvas.getContext('2d');
//规定画布大小
myCanvas.width = window.innerWidth;
myCanvas.height = window.innerHeight;
3.创建方法,用于将画布填充成黑色
//创建方法,用于将画布填充成黑色
//填充画布
function fillCanvas() {
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, myCanvas.wid