編集履歴

質問編集履歴

コードを修正しました

2020/06/22 11:31

投稿

RSKK

スコア8

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -126,17 +126,17 @@
       context.drawImage(bgImg, 0, 0, canvas.width, canvas.height);
-      drawMask();
   };
   bgImg.src = '![背景画像](440135c39dccbed93ddf199aa79d377a.jpeg)';
+var size = 50;
   function drawMask() {
-    var size = 50;
+    size += 1;
     // globalCompositeOperation に destination-in を設定
@@ -150,7 +150,7 @@
    // マスクを大きくする
-    size++;
     // save(); 時点での描画状態を復元

タイトル削除

2020/06/22 11:31

投稿

RSKK

スコア8

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -37,8 +37,6 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Kyowa</title>
   <link rel="stylesheet" href="">

背景画像を挿入しました

2020/06/22 11:06

投稿

RSKK

スコア8

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -132,7 +132,7 @@
   };
-  bgImg.src = 'image/background.svg';
+  bgImg.src = '![背景画像](440135c39dccbed93ddf199aa79d377a.jpeg)';

マスクを使用して大幅に修正致しました

2020/06/22 11:00

投稿

RSKK

スコア8

test CHANGED Viewed

	@@ -1 +1 @@
1	- create.jsで背景画像を中央からフェードイン~~する方法~~
1	+ create.jsで背景画像を中央からフェードインしたい

test CHANGED Viewed

@@ -4,15 +4,9 @@
 [リンク内容](https://supercrowds.co/)
-上記サイトのような画面奥にあるモデルの写真が中央からフェードインしてくるアニメーションを実装するため、create.jsで実装しています。
+上記サイトのような画面奥にあるモデルの写真が中央からフェードインしてくるアニメーションを実装したいため、背景画像の上にマスクを設定しておりますが、設定したマスクを動かすことができません。
-円を中央から拡大するところまでは参考サイトを確認しながら実装できたのですが、
-中央からフェードインができません。
+原因わかりますでしょうか？
-どのようにすれば下の写真が出てくるような実装ができるのでしょうか？
-検索キーワードだけでもご教授頂けると幸いです。
@@ -44,7 +38,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title></title>
+  <title>Kyowa</title>
   <link rel="stylesheet" href="">
@@ -52,15 +46,15 @@
   href="http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css" />
-<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
+	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
 </head>
 <body>
-  <canvas id="canvas">
+  <canvas id="canvas"></canvas>
-  </canvas>
 <style>
@@ -82,19 +76,21 @@
 }
 canvas {
-        background-image: url('![imgae](10917b2f51f6a1288d057d46a38cd9de.jpeg)');
+  background-color: white;
-        background-size: cover;
+  height: 100%;
-        height: 100%;
+  width: 100%;
-        width: 100%;
+  overflow: hidden;
     }
- </style>
+</style>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
@@ -108,149 +104,67 @@
   <script>
+(function () {
+  var canvas = document.getElementById('canvas');
-//秒たったら強制的にロード画面を非表示
+  canvas.width = 960;
-$(function(){
+  canvas.height = 540;
-    setTimeout('stopload()',2000);
+  var centerX = canvas.width / 2;
-});
+  var centerY = canvas.height / 2;
-function stopload(){
-   //$('#top').fadeOut(1200);
+  var context = canvas.getContext('2d');
-  const WIDTH = window.innerWidth;
+  var bgImg = new Image();
-  const HEIGHT = window.innerHeight;
+  bgImg.onload = function () {
+      context.globalCompositeOperation = 'source-over';
+      context.drawImage(bgImg, 0, 0, canvas.width, canvas.height);
+      drawMask();
+  };
+  bgImg.src = 'image/background.svg';
-  // canvas要素を作る。
+  function drawMask() {
-  const canvas = document.getElementById('canvas');
+    var size = 50;
-  canvas.width = WIDTH;
+    // globalCompositeOperation に destination-in を設定
-  canvas.height = HEIGHT;
+    context.save()
+    context.globalCompositeOperation = 'destination-in';
+    context.arc(centerX, centerY, size, 0, Math.PI * 2);
-  // コンテキストを取得しておく。
+    context.fill();
-  const context = canvas.getContext('2d');
+   // マスクを大きくする
+    size++;
+    // save(); 時点での描画状態を復元
-  // body要素に追加する。
+    context.restore();
-  document.body.appendChild(canvas);
-//
-// メイン処理。
-//
-// 表示する円を管理する配列を作成しておく。
-// 少ない場合（1個とか2個とか）はいらないかも。
-  const circles = [];
-// 円を追加する。
-// ここでは円はx,y,radius（半径）を持ったオブジェクト。
-// 単なるオブジェクトのかわりにCircleクラスを作っても良いかも。
-  circles.push({x:WIDTH/2, y:HEIGHT/2, radius: 50});
-// ループさせる関数。
-// 前の描画を消す→オブジェクトの状態を更新する→オブジェクトを描画する→次のフレームに移る
-// の繰り返し。
-  function loop(timestamp) {
-  // 前の描画を消す。
-  // 背景色が欲しい場合はかわりにfillRectを使い、
-  //    context.fillStyle = 'rgb(255, 0, 0)';
-  //    context.fillRect(0, 0, WIDTH, HEIGHT);
-  // のようにする。
-    context.clearRect(0, 0, WIDTH, HEIGHT);
-  // 各円の状態を更新する。
-    for(const c of circles) {
-      if(c.radius < 1000) { c.radius ++; } // どんどん大きくなって…
-    }
-  // 各円を描画する。
-    for(const c of circles) {
-      context.beginPath();
-      context.fillStyle = 'rgb(0, 0, 0)'; // 黒色
-      context.arc(c.x, c.y, c.radius, 0, 2 * Math.PI);
-      context.fill();
-    }
-  // requestAnimationFrameを呼び出す。
-  // requestAnimationFrameは1度の呼び出しで1回しか実行してくれないため
-  // 毎回呼び出す必要がある。
-    window.requestAnimationFrame((ts) => loop(ts));
+    window.requestAnimationFrame(drawMask);
   }
+})();
-// requestAnimationFrameを1回だけ呼び出す。
-// あとはloop関数の中でrequestAnimationFrameが呼び出され
-// その中でloop関数が実行され、そのloop関数の中でrequestAnimationFrameが…
-// となるので永遠にアニメーションが続く。
-  window.requestAnimationFrame((ts) => loop(ts));
-};
-    </script>
+</script>
 </body>