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

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

新規登録して質問してみよう
ただいま回答率
85.50%
jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

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

jQuery

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

Q&A

解決済

3回答

3242閲覧

Sketch.jsのパーティクルの実装をbackroundに指定したい

MASA08

総合スコア24

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

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

jQuery

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

1グッド

1クリップ

投稿2018/02/01 14:58

編集2018/02/02 03:40

現在以下のサイトを見てsketch.jsのparticleの実装を行なっています。
http://soulwire.github.io/sketch.js/examples/particles.html

基本的にはコードをコピペしているだけです。

このような実装を例えば

html

1<div class="main"></div>

のbackgroundとして表示するやり方を調べているのですが、なかなか答えが見つかりません。

どなたかお教えしていただくことは可能でしょうか?

なお、開発はrailsで行なっており、現在はhtml.erbのファイルにsketch.jsを読み込ませて、上記サイトのhtmlファイルに記述されているscriptをコピペしている状態です。

追記
現在、railsで開発をしていて、index.html.erbは下記のようになっております。

script

1<canvas id="canvas"></canvas> 2<section id="body"> 3// 中身 4</section> 5 6<script src="../js/sketch.js"></script> 7<script> 8 9 // ---------------------------------------- Particle ---------------------------------------- 10 function Particle(x, y, radius) { 11 this.init(x, y, radius); 12 } 13 Particle.prototype = { 14 init: function (x, y, radius) { 15 this.alive = true; 16 this.radius = radius || 10; 17 this.wander = 0.15; 18 this.theta = random(TWO_PI); 19 this.drag = 0.92; 20 this.color = '#fff'; 21 this.x = x || 0.0; 22 this.y = y || 0.0; 23 this.vx = 0.0; 24 this.vy = 0.0; 25 }, 26 move: function () { 27 this.x += this.vx; 28 this.y += this.vy; 29 this.vx *= this.drag; 30 this.vy *= this.drag; 31 this.theta += random(-0.5, 0.5) * this.wander; 32 this.vx += sin(this.theta) * 0.1; 33 this.vy += cos(this.theta) * 0.1; 34 this.radius *= 0.96; 35 this.alive = this.radius > 0.5; 36 }, 37 draw: function (ctx) { 38 ctx.beginPath(); 39 ctx.arc(this.x, this.y, this.radius, 0, TWO_PI); 40 ctx.fillStyle = this.color; 41 ctx.fill(); 42 } 43 }; 44 // ---------------------------------------- Example ---------------------------------------- 45 var MAX_PARTICLES = 280; 46 var COLOURS = [ 47 '#69D2E7', 48 '#A7DBD8', 49 '#E0E4CC', 50 '#F38630', 51 '#FA6900', 52 '#FF4E50', 53 '#F9D423' 54 ]; 55 var particles = []; 56 var pool = []; 57 var demo = Sketch.create({container: document.getElementById('canvas'), retina: 'auto'}); 58 demo.setup = function () { 59 // Set off some initial particles. 60 var i, 61 x, 62 y; 63 for (i = 0; i < 20; i++) { 64 x = (demo.width * 0.5) + random(-100, 100); 65 y = (demo.height * 0.5) + random(-100, 100); 66 demo.spawn(x, y); 67 } 68 }; 69 demo.spawn = function (x, y) { 70 71 var particle, 72 theta, 73 force; 74 if (particles.length >= MAX_PARTICLES) 75 pool.push(particles.shift()); 76 particle = pool.length 77 ? pool.pop() 78 : new Particle(); 79 particle.init(x, y, random(5, 40)); 80 particle.wander = random(0.5, 2.0); 81 particle.color = random(COLOURS); 82 particle.drag = random(0.9, 0.99); 83 theta = random(TWO_PI); 84 force = random(2, 8); 85 particle.vx = sin(theta) * force; 86 particle.vy = cos(theta) * force; 87 particles.push(particle); 88 }; 89 demo.update = function () { 90 var i, 91 particle; 92 for (i = particles.length - 1; i >= 0; i--) { 93 particle = particles[i]; 94 if (particle.alive) 95 particle.move(); 96 else 97 pool.push(particles.splice(i, 1)[0]); 98 } 99 }; 100 demo.draw = function () { 101 demo.globalCompositeOperation = 'lighter'; 102 for (var i = particles.length - 1; i >= 0; i--) { 103 particles[i].draw(demo); 104 } 105 }; 106 demo.mousemove = function () { 107 var particle, 108 theta, 109 force, 110 touch, 111 max, 112 i, 113 j, 114 n; 115 for (i = 0, n = demo.touches.length; i < n; i++) { 116 touch = demo.touches[i], 117 max = random(1, 4); 118 for (j = 0; j < max; j++) { 119 demo.spawn(touch.x, touch.y); 120 } 121 } 122 }; 123</script>

ですがスケッチが背景に指定されません。どなたか回答お願いします。

defghi1977👍を押しています

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

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

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

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

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

kei344

2018/02/01 15:00

sketch.jsでは?タイトルと本文がSlick.jsになっています。
MASA08

2018/02/01 15:02

その通りです!修正します。ご指摘ありがとうございます!
guest

回答3

0

質問の内容が曖昧なため, 勝手に想像して回答します. なおsketch.js利用の有無は考えず, あくまでcanvas要素汎用の内容としています.


要件を下記と仮定します.

  • div要素を用意し, その範囲にcanvas要素のグラフィックを"背景"画像として描画したい.

"背景"というのはdiv要素が内包しているコンテンツの(z-indexの意味における)最下部を指す.

  • div要素上にカーソルを当てると, その位置に応じてcanvasグラフィックが変化する.

上記のもとで最も簡単なコードを提示します.

HTML

1<div> 2<canvas></canvas> 3div要素内のコンテンツ 4</div>

CSS

1div{ 2 position: relative; 3 width: 500px; 4 height: 500px; 5} 6div>canvas{/*canvas要素を背景っぽく配置するスタイル*/ 7 position: absolute; 8 width: 100%; 9 height: 100%; 10 z-index:-1; 11 pointer-events: none; 12 background-color: pink; 13}

JavaScript

1"use strict"; 2document.addEventListener("DOMContentLoaded", e => { 3 const div = document.querySelector("div"); 4 const canvas = div.querySelector("canvas"); 5 //canvas要素のサイズをdiv要素に合わせる 6 const style = window.getComputedStyle(canvas); 7 [canvas.width, canvas.height] = [parseInt(style.width), parseInt(style.height)]; 8 const ctx = canvas.getContext("2d"); 9 10 //(1)イベントはdiv要素で受ける場合 11 div.onmousemove = e => { 12 //例えばパーティクルの描画処理 13 ctx.clearRect(0, 0, canvas.width, canvas.height); 14 const [x, y] = [e.offsetX, e.offsetY]; 15 ctx.fillRect(x - 2, y - 2, 4, 4); 16 }; 17 18 //-------------------------------------------------------- 19 20 //(2)canvas側の処理を触れない場合 21 //canvas側の描画処理(元からあるものを触らない) 22 canvas.onmousemove = e => { 23 ctx.clearRect(0, 0, canvas.width, canvas.height); 24 const [x, y] = [e.offsetX, e.offsetY]; 25 ctx.fillRect(x - 2, y - 2, 4, 4); 26 }; 27 //div要素で受けたイベントを元にcanvas要素側のイベントをトリガ 28 //NOTE:パラメータは必要に応じて追加する 29 div.onmousemove = e => { 30 canvas.dispatchEvent(new MouseEvent("mousemove", { 31 bubbles: false,//これがないと無限ループする 32 clientX: e.clientX, 33 clientY: e.clientY, 34 offsetX: e.offsetX, 35 offsetY: e.offsetY 36 })); 37 }; 38});

HINT:

  • 既にcanvas要素の描画処理が実装済みの場合は, canvas要素に対するリスナ登録をdiv要素に振り分ける(もしくはdispatchEventメソッドを使ってdiv要素でのイベント発生時にcanvas要素側のイベントをトリガする)ようにします.
  • (ウィンドウリサイズ等により)div要素のサイズが変化する場合は, リサイズ時(resizeイベント), もしくは定期的にcanvas要素のサイズも変更する必要があります.

NOTE:
FireFox/Safari系ブラウザであれば, それぞれ個別のAPIを用いてcanvas要素を任意要素の背景とすることが可能です.(-moz-element,mozSetImageElement/-webkit-canvas,getCSSCanvasContextで調べてみよう)
※Chromeでは機能が廃止されています.

投稿2018/02/02 04:20

編集2018/02/02 04:44
defghi1977

総合スコア4756

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

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

defghi1977

2018/02/02 04:27

demo.mousemove = function () { の部分でsketch.jsのAPIを使っているから, dispatchEventを使うしか無いかな
guest

0

sketch.jsはCanvas要素に描画しているので、直接CSSのbackgroundに設定することはできませんが、下記のような方法があるようです。

【背景をCanvasにする - Qiita】
https://qiita.com/mohayonao/items/e96e68aedc04a37f0c6d

【Canvasを背景に設定する | office606】
https://office606.org/archives/181/


sketch.js の使い方の問題では?

HTML

1 <div id="canvas"></div><!-- この中にcanvas要素ができる仕様だから失敗していたのでは? --> 2 <section id="body"> 3 /* 実際のbodyはここに書く */ 4 </section> 5```[https://jsfiddle.net/w2veuL6g/](https://jsfiddle.net/w2veuL6g/)

投稿2018/02/01 19:08

編集2018/02/02 17:00
kei344

総合スコア69364

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

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

MASA08

2018/02/02 03:38

ご回答ありがとうございます。しかしながらスケッチが背景に表示されません。上記質問に追記します。
kei344

2018/02/02 03:45

CSSが書かれていませんが・・・。
MASA08

2018/02/02 04:37

あ、すいません。 CSSは #canvas { position:fixed; top:0; left:0; width:100%; height:100%; } #body { position:absolute; top:0; left:0; } を記述しています
guest

0

自己解決

色々と回答をしていただいて大変申し訳ないのですが、他のプラグインを使わせていただきました。ありがとうございました。。

投稿2018/02/25 03:19

MASA08

総合スコア24

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

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

defghi1977

2018/02/25 03:36

質問をクローズするのであれば, どのように解決したのか(今回は他のプラグインの詳細)について記述してください.
MASA08

2018/02/25 04:03

defghi1997さん、ご返信ありがとうございます。そして今回は質問にご回答いただきありがとうございました。今回はもともとbackgroundで「お祝い感を出したい」をいう目的でsketchをしようしようと思っていたのですが、力不足で実装ができなかったため、Confetti.js(https://codepen.io/tag/confetti/)を使用させていただきました。色々と丁寧にご回答いただき、またそれにも関わらず失礼なクローズの仕方をしてしまい申し訳ありませんでした。
defghi1977

2018/02/25 04:15

なんら解決策を示さずに質問をクローズしてはならない理由は「同じような問題を抱えている人」がこの記事にたどり着いた時を踏まえてのことです. また, 無駄に解決済とすることでかえって真の解決策の提示を妨げる可能性があります. 要は質問がパブリックなものとなったことでこの質問は既にあなただけのものではないのです.
MASA08

2018/02/25 07:00

確かにその通りですね。 非常に勉強になりました。考え方を改めます。指摘していただきありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問