Q&A
> 当方でcanvasの仕組みが理解が出来ていない為だと思います。
まず、canvasのこと学びましょうよ。
あと、マウスカーソルにアニメーションつけるだけなら、
canvasいりません。
https://www.evoworx.co.jp/blog/mouse-stoker-gsap/
前提・実現したいこと
以下のshootingstar を実装したい。
https://codepen.io/ko-yelie/pen/LqXWWx
http://photoshopvip.net/114044（紹介元サイト：こちらの中にあるshooting starです。）
質問内容
プログラミング初心者です。
shooting starというマウスカーソルがキラキラの流れ星になるものを
webサイトへ実装したいと考えております。
恥ずかしながらcanvasも初めて知りました。
canvasを勉強してから質問した方が良いかと思ったのですが、
糸口がわからずこちらで質問させて頂きました。
発生している問題・エラーメッセージ
画面は黒いままで、マウスカーソルには何も出てきません。
該当のソースコード
html
1 2<!DOCTYPE html> 3<html lang="ja"> 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width"> 7 <link rel="stylesheet" href="../../event/5th/css/reset.css"> 8 <link rel="stylesheet" href="../../event/5th/css/star.css"> 9 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 10 11 <title> 12 タイトル 13 </title> 14 15 16 <script> 17 parcelRequire = (function (init) { 18 // Save the require from previous bundle to this closure if any 19 var previousRequire = typeof parcelRequire === 'function' && parcelRequire; 20 var nodeRequire = typeof require === 'function' && require; 21 var modules = {}; 22 23 ※文字数が多すぎた為、割愛させて頂きました。 24 こちらにcodepenに載っていたjsをそのままコピーしております。 25 26 </script> 27 28 </head> 29 <body> 30 <canvas id="canvas"></canvas> 31 <p id="message">Move your mouse</p> 32 </body> 33</html> 34 35 36 37 38 39
css
1 2@charset "utf-8"; 3 4html, 5body { 6 height: 100%; 7} 8 9body { 10 margin: 0; 11 background-color: #000; 12} 13 14#canvas { 15 display: block; 16 width: 100%; 17 height: 100%; 18} 19body.o-start #canvas { 20 cursor: none; 21} 22 23#message { 24 position: absolute; 25 right: 0; 26 bottom: 0; 27 left: 0; 28 color:red; 29 font-family: Georgia, serif; 30 font-size: 0.9rem; 31 text-align: center; 32 letter-spacing: 0.1em; 33 pointer-events: none; 34 opacity: 0; 35 transition: opacity 500ms; 36 border: 1px solid red; 37} 38body.o-start #message { 39 opacity: 1; 40} 41
試したこと
単純にhtml、css、jsをコピーしてしまいました。
それではやはりうまくいかず、
canvasの実装方法などを調べましたが、見つけることが出来ませんでした。
当方でcanvasの仕組みが理解が出来ていない為だと思います。
コメントとご指摘ありがとうございます。その通りです。
貼って頂いたページも検索して見ていたのですが、shootingstarの動きが魅力的だったので、
こちらを実現できたらと思った次第です。
回答1件
0
ベストアンサー
こんにちは。
ご提示のコードを試してみましたが、いくつか変更したところ、動作しました。
1.THREE.js と dat.GUI を読み込む。（resourcesというところを見ると確認できます）
html
1<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js"></script> 2<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.5/dat.gui.min.js"></script>
2.script を body の最後に移動。
html
1<p id="message">Move your mouse</p> 2<script> 3 parcelRequire = (function (init) { 4//... 5 }); 6</script> 7</body>
投稿2020/09/05 03:14
総合スコア36960
返信が遅くなり、大変失礼致しました。
ご回答ありがとうございます。
教えて頂いた通りに修正しましたところ、無事に動かすことが出来ました！
質問内容も稚拙だったかと思いますが、丁寧に教えて頂き感謝致します。
本当にありがとうございました！！
あなたの回答
tips
プレビュー
