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

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

新規登録して質問してみよう
ただいま回答率
85.48%
JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1259閲覧

matter.jsを使ってcanvasに描画したオブジェクトに影をつけたい

okomekei02

総合スコア12

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1グッド

0クリップ

投稿2020/03/13 08:43

現在あるサイトのトップページを作っており、matter.jsを使ってcanvasに描画した円のオブジェクトに影つけたいのですが、やり方が全く見当がつかず困っています。

レイヤーとしては、

  1. 背景動画
  2. canvas(canvasの背景は透過させ、円のオブジェクトのみ見えるようにしています)

イメージ説明

オブジェクトの下には見えないですが、透明な床オブジェクトが配置してあり、背景動画に馴染むような影を円のオブジェクトにつけたいです。どうすれば良いでしょうか?

js

1 var Engine = Matter.Engine, 2 Render = Matter.Render, 3 Runner = Matter.Runner, 4 World = Matter.World, 5 Bodies = Matter.Bodies; 6 7 8 var engine = Engine.create(), //物理演算エンジンを生成? 9 world = engine.world; //重力の存在する仮想世界の生成…? 10 11 12 13 var winWidth = screen.width; 14 var winHeight = screen.height; 15 16 // レンダリング対象のキャンバス 17 var canvas = document.getElementById('space'); 18 19 var MouseConstraint = Matter.MouseConstraint, 20 Mouse = Matter.Mouse; 21 22 // create renderer 23 var render = Render.create({ //レンダリングの設定? 24 element: document.body, 25 canvas: canvas, 26 engine: engine, 27 options: { 28 width: winWidth, //ステージの横幅 29 height: winHeight, //ステージの高さ 30 wireframes: false, //ワイヤーフレームモードをオフ 31 showAngleIndicator: false, 32 background: 'transparent' 33 34 } 35 }); 36 37 var mouse = Mouse.create(render.canvas), 38 mouseConstraint = MouseConstraint.create(engine, { 39 mouse: mouse, 40 constraint: { 41 stiffness: 0.2, 42 render: { 43 visible: false 44 } 45 } 46 }); 47 World.add(world, mouseConstraint); 48 49 50 render.mouse = mouse; 51 52 53 Render.run(render); 54 55 // create runner 56 var runner = Runner.create(); 57 Runner.run(runner, engine); //物理エンジンを実行? 58 59 60 //円のオブジェクト作成 61 var maru = Bodies.circle(300, 0, 44, { 62 restitution: 1, 63 render: { 64 fillStyle: '#F08E8F', //中身の色 65 strokeStyle: '#007FFF', //線の色 66 lineWidth: 5, //線の太さ 67 sprite: { //スプライトの設定 68 texture: './images/twitter.png', //テクスチャ画像を指定 69 xScale: 0.1, 70 yScale: 0.1 71 }, 72 73 74 } 75 }); 76 77 var maru2 = Bodies.circle(300, 0, 50, { 78 restitution: 1, 79 render: { 80 fillStyle: '#F08E8F', //中身の色 81 strokeStyle: '#007FFF', //線の色 82 lineWidth: 5, //線の太さ 83 84 } 85 }); 86 87 var yuka = Bodies.rectangle(800, 1200, 3000, 30, { 88 isStatic: true, 89 render: { 90 strokeStyle: 'rgba(0, 0, 0, 0)', 91 fillStyle: 'rgba(0, 0, 0, 0)' 92 } 93 }); 94 95 Matter.Events.on(mouseConstraint, 'mousedown', function(event) { 96 if (event.source.body === maru) { 97 window.open('https://twitter.com/Yoneyone83', '_blank'); 98 99 } 100 }); 101 102 World.add(world, [ 103 maru, 104 yuka, 105 maru2 106 ]); 107 108
s.k👍を押しています

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

スマホからなので簡単に。

Matter.Render.createでoptionsに
showShadowsかあるので試してみてください。
https://github.com/liabru/matter-js/wiki/Rendering

投稿2020/03/13 08:59

oikashinoa

総合スコア2826

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

okomekei02

2020/03/13 15:05

こんなオプションがあったんですね!ありがとうございます!とても助かりました!
oikashinoa

2020/03/13 22:40

スマホからなので試せてないので、結果を教えてもらえると嬉しいです。 可能ならスクショも
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問