Recommended
More Related Content
What's hot
What's hot (16)
Similar to 背景にCanvasを動かす
Similar to 背景にCanvasを動かす (20)
背景にCanvasを動かす
- 2. 大まかな構造 • いい感じのビュジュアルスクリプトライブラリを探す(paper.js etc) • 最初にスクリプト呼び出し又は記述 • bodyの上にすぐcanvasを作りその上にsection置き、この中に上 物の内容を書く • cssにcanvasと上物の奥行き(z-index)の関係を記述
- 3. スクリプト記述例 <script type="text/javascript" src="js/paper.js"> < /script> <script type="text/paperscript" canvas="canvas"> // Please note: dragging and dropping images only works for // certain browsers when serving this script online: var values = {amount : 30 省略 dragover: onDocumentDrag, dragleave : onDocumentDrag }); </script>
- 5. html記述例 </head> <body> <canvas id="canvas"></canvas> <section id="body"> <!--/* 実際のbodyはここに書く */--> 省略 </section> </body> </html>
- 6. css記述例 #canvas { position:fixed; top:0; left:0; width:100%; height:100%; z-index:1;} #body { position:absolute; top:0; left:0; z-index:1;}
- 8. 結果