前提・実現したいこと
https://codepen.io/prime156/pen/pebwpO
canvasでこちらのコードの写経をしていたのですが、getImageDataで値を格納したものをdataプロパティで条件分岐させている
処理がわかりません
回答よろしくお願いします
該当のソースコード
stage.compositeOperation = "default";
stage.addChild(rect);
stage.addChild(text);
stage.update();
var pixels = ctx.getImageData(text.x, text.y, text.w, text.h);
stage.removeChild(rect);
stage.removeChild(text);
stage.update();
stage.compositeOperation = "lighter";
var i = 0;
var particle;
for (var w = 0 ; w < text.w; w += cull){
for (var h = 0; h < text.h; h += cull) {
if(pixels.data[(w + text.w * h) * 4] !== 0 && i < particles.length){
particle = particles[i];
particle.x = text.x + w;
particle.y = text.y + h;
particle.vx = 0;
particle.vy = 0;
scale = 1 + 4 * Math.random();
particle.scaleX = particle.scaleY = 1 + 2 * Math.random() * Math.random();
i++;
}
}
}補足情報
createjsを使っています。
情報追記
カンバス上で書いたテキストをgetImageDataでデータを取得した後にremoveChildで削除してからテキストの幅と
高さがあった位置にfor文で2重で回すことによってテキストの文字部分があった場所にシェィプを追加していることまでは分かるのですが、それだけだと長方形に丸のシェイプが連なって文字にはならないのでおそらく、dataプロパティのif文で文字情報があった位置にだけ丸のシェイプを付与していると思うのですがそのif文で計算している箇所が分かりません
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
まだ回答がついていません
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 88.21%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正の依頼
m.ts10806
2019/06/23 21:33
「わかりません」とは？
「わかっていること」「わかっていないこと」は明確に記載してください。
https://teratail.com/help/question-tips#questionTips2
「コード解説依頼」となると質問ではなくなります。
webStudy
2019/06/23 22:25
質問自体初めてで分からないことも多く申し訳ありません。
情報追記させていただきました。