質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.48%

  • JavaScript

    17078questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • canvas

    267questions

    HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

javascript、canvasで花吹雪

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 520

sleeeep12

score 12

javascriptでcanvasを生成して花吹雪を降らすコードを書きました。
動きはするし、花びらの挙動も思った通りに操作できたのですが、何故かサイトをリロードしたら花びらが出て来なくなり、2回リロードしてやっと作動する感じになっています。

ローカルでしか試していないのですが、urlから飛んでサイトが表示されたらちゃんと吹雪いてます。しかしやはりページ更新したら動かなくなり、もう一度リロードしたらまた動き出します。

何故そのような挙動になりのか分からず困っています。
花吹雪の全コードはこの通りです。

$(function(){

              window.onload = function(){

                  var timer = setInterval(timerFunc,30);

                  //canvas作成(桜吹雪)
                  var canvas1 = document.createElement('canvas');

                  document.body.appendChild(canvas1);

                  mainCanvasContext = canvas1.getContext("2d");

                  canvas1.width = 800;
                  canvas1.height = 350;

                  canvas1.style.position = "absolute";
                  canvas1.style.top = "0";
                  canvas1.style.left = "0";
                  canvas1.style.zIndex = "500";

                  stageX = canvas1.width;
                  stageY = canvas1.height;
                  init();

                  canvas1.onmousemove = function(e){//マウスの動き
                      mouseX=e.clientX;
                      mouseY=e.clientY;
                      windVelX = (1 - mouseX / stageX)*35;
                      windVelY = (0.6 - mouseY / stageY)*15;
                  };

              };


              //------------------------------
              //桜吹雪
              //------------------------------

              // forked from kanariia1's "forked: 桜吹雪" http://jsdo.it/kanariia1/vOcE
              // forked from njf's "桜吹雪" http://jsdo.it/njf/alFS
              function Particle(){ };
              Particle.prototype.x = 0;
              Particle.prototype.y = 0;
              Particle.prototype.velX = 0;
              Particle.prototype.velY = 0;
              Particle.prototype.rad = 0;
              Particle.prototype.w = 0;
              Particle.prototype.time = 0;
              Particle.prototype.zrot = 0;
              Particle.prototype.zrotW = 0;
              Particle.prototype.scale = 1;

              var stageX = 445;
              var stageY = 445;

              var mainCanvasContext;

              var particles = new Array();

              var mouseX = 0;
              var mouseY = 0;

              var windVelX = 0;
              var windVelY = 0;

              var image = new Image();
              image.src = "";//花びら
              function initParitcle(initP){
                  initP.w = 0.4*(0.5-Math.random());
                  initP.rad = Math.PI*Math.random();
                  initP.velY = Math.random()*3+5;//縦の動き
                  initP.velX = (-4-Math.random())*5;//横の動き
                  initP.zrot = Math.PI*Math.random();
                  initP.zrotW = (0.5-Math.random())/100;
                  initP.scale = (1.1-Math.random())*0.7;//花びらの大きさ
                  initP.time = 0;

              }

              function init(){
                  for(var i = 0 ; i < 7 ; i++){//花びらの数
                      var p = new Particle();
                      initParitcle(p);
                      p.y = (1.1-3.2*Math.random())*stageY;
                      p.x = Math.random()*stageX;

                      particles.push(p);
                  }
              };


              function sortParticle(p1,p2){
                  return(p1.scale-p2.scale);
              }


              function timerFunc( ){
                  mainCanvasContext.setTransform(1,0,0,1,0,0);
                  //mainCanvasContext.fillStyle = 'rgba(86, 14, 17, 0.4)';
                  mainCanvasContext.fillRect(0, 0, stageX, stageY);
                  mainCanvasContext.clearRect(0,0,stageX,stageY);
                  particles.sort(sortParticle);
                  for(var i = 0 ; i<particles.length; i++){
                      var p = particles[i];
                      var rad = p.rad;
                      mainCanvasContext.setTransform(Math.cos(rad), Math.sin(rad), -Math.sin(rad), Math.cos(rad), p.x+image.width*0.5, p.y+image.height*0.5 );
                      var s = Math.sin(p.zrot);
                      var c = Math.cos(p.zrot);
                      mainCanvasContext.scale(p.scale*s,p.scale*c);
                      mainCanvasContext.drawImage( image,
                                                  0, 0,
                                                  image.width, image.height ,
                                                  -image.width*0.5,-image.height*0.5,
                                                  image.width,image.height
                                                 );
                      p.time ++;
                      p.x+=(p.velX+ windVelX)*(p.scale/3) ;
                      p.y+=(p.velY+windVelY)*(Math.abs(p.scale)/3);
                      p.rad+=p.w;
                      p.zrot+=p.zrotW;
                      if(p.rad > Math.PI){
                          p.rad = -Math.PI;
                      }else if(p.rad < -Math.PI){
                          p.rad = Math.PI;
                      }
                      var ts = image.width*Math.abs(p.scale);
                      if(p.y>stageY+ts||p.x<-ts||p.x>ts+stageX){
                          initParitcle(p);
                          ts = image.width*Math.abs(p.scale)
                          if(p.y>stageY+ts){
                              p.y = -ts;
                              p.x = Math.random()*stageX;
                          }else{
                              if((p.velX+ windVelX)*(p.scale/3)>0){
                                  p.x = -ts;
                              }else{
                                  p.x = stageX+ts;
                              }
                          }

                      }

                  }

              }


});

      どうか、お力添えをm_ _m   よろしくお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • mts10806

    2018/04/25 16:58

    突然文中にあらわれた「urlから飛んでサイトが表示されたら」の意味が分からないのですが、どういう状況なのでしょうか。画像のサイズはどれくらいでしょうか?

    キャンセル

  • sleeeep12

    2018/04/25 19:51

    質問ありがとうございます。ページ更新する毎に動く動かないの繰り返しなので、一度閉じて、新しくURLから直接ページを表示させた場合はどうなるのか試したんです。んでその場合は動いたっつー意味ですね。花びらのサイズは2KBです。

    キャンセル

回答 1

checkベストアンサー

0

画像を読み込む前にスクリプトが走ってるんじゃないでしょうか。

追記:

ちょっと真面目に調べてみました。
https://qiita.com/daisukeokaoss/items/dce517562f16e535f71f
によると

$(function(){


はドキュメントが読み終わった後に実行されるそうですね。
ロードが終わった後で

window.onload = function(){


とかしても意味なくないですか?

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/04/26 23:34

    tekka様のヒントを参考に、

    $(function(){

    });

    を外したら解決できました!
    いやはや、本当にありがとうございました^^

    キャンセル

関連した質問

同じタグがついた質問を見る

  • JavaScript

    17078questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • canvas

    267questions

    HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。