鏤空的星辰 - HTML/CSS & javascript 套件輕鬆完成
1、Demo
2、HTML:
<!DOCTYPE html>
<html>
<head>
<title>Star Night Demo</title>
<style>
canvas {
position: absolute;
top: 0px;
left: 0px;
background: transparent;
}
</style>
<script src="space_shooter_part_one.js"></script>
</head>
<body onload="init()" >
<div style="z-index:1000;position: relative;background: transparent;">
<img alt="" src="imgs/bg_cover.png"/>
</div>
<!-- The canvas for the panning background -->
<canvas id="background" width="1920" height="1080" style="z-index:1;">
Your browser does not support canvas. Please try again with a different browser.
</canvas>
</body>
</html>
3、圖檔:
A、png檔(鏤空圖)
2、HTML:
<!DOCTYPE html>
<html>
<head>
<title>Star Night Demo</title>
<style>
canvas {
position: absolute;
top: 0px;
left: 0px;
background: transparent;
}
</style>
<script src="space_shooter_part_one.js"></script>
</head>
<body onload="init()" >
<div style="z-index:1000;position: relative;background: transparent;">
<img alt="" src="imgs/bg_cover.png"/>
</div>
<!-- The canvas for the panning background -->
<canvas id="background" width="1920" height="1080" style="z-index:1;">
Your browser does not support canvas. Please try again with a different browser.
</canvas>
</body>
</html>
3、圖檔:
A、png檔(鏤空圖)
B、背景圖
留言
張貼留言