現在あるサイトのトップページを作っており、matter.jsを使ってcanvasに描画した円のオブジェクトに影つけたいのですが、やり方が全く見当がつかず困っています。
レイヤーとしては、
- 背景動画
- 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

回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/03/13 15:05
2020/03/13 22:40