HTML5+Canvasでパーティクルっぽいのを作ってみる
HTML5+Canvasでパーティクルっぽいのを作ってみる HTML5+Canvasを使用して簡単な横に流れるパーティクルを作成してみます。 投稿日2015年07月16日 更新日2019年04月13日 パーティクルオブジェクトを作成して動かす 基本的な作りは下記記事をベースに作成します。 HTML5で作るCanvasアニメーションの基礎 上記の記事では一つの円を動かすだけだったので描画関数だけ作成しました。 function drawCircle(x, y, scale, color) { ctx.beginPath(); ctx.arc(x, y, scale, 0, 2*Math.PI, false); ctx.fillStyle = color; ctx.fill(); } パーティクルの場合、粒子一つ一つに位置情報や速度の設定をしたいので、少し拡張してオブジェクトとして作成します。
リアクティブプログラミングの技術を用いてマウスストーカーを実装する - はこべにっき ♨
古き良きインターネットアプリケーションであるマウスストーカー*1をリアクティブプログラミングの技術を活用して実装してみるという取り組みをしましたのでご紹介します。リアクティブプログラミングというと主語が大きめですが、ここではbacon.jsを使ってるくらいの意味です。 できたもの まずは完成したマウスストーカーを紹介します。チェーンのように連なった星がマウスカーソルの軌跡を辿ってついてきます。工夫してうごかすとなかなか綺麗です。下のボタンを押すと実際にこの画面でマウスストーカーを有効にすることができます(requestAnimationFrameに対応したPCブラウザのみ)。いろいろ動かして遊んでみてください。 このページでマウスストーカーを有効にする 実装 このマウスストーカーがどのように実装されているか紹介します。ソースコードはGitHubに公開していますので、適宜ご参照ください。手元
即時関数(function(){ ... })()の別の書き方いろいろ - 泥のように
JavaScriptでよく使われるコード片に即時関数というものがあります。無名関数を宣言して即実行することで、ブロックスコープの存在しないJavaScriptにおいて擬似的にブロックスコープを再現します。 var a = "global"; (function(){ var a = "local"; alert(a); //local })(); alert(a); //global 一番有名なのはこの(function(){ ... })()の形式なのですが、なぜfunctionの外側にカッコが必要なのか不思議に思ったことはないでしょうか？ ためしにfunction(){ ... }()と書いてみると、Syntax Errorが発生します。 なぜfunction(){ ... }()はSyntax Errorなのか JavaScriptにはfunction文とfunction式があって、
JavaScriptのクラス定義方法を徹底解説！！
JavaScriptでは、本来のオブジェクト指向言語とは少し異なり、 正確なクラスの定義は出来ません。 しかし、JavaScriptでは強力な関数定義方法が用意されていますので、関数をクラスとして 実装する事で対応するのが一般的です。 今回の記事では、そんなJavaScript流のクラス定義方法をソースコード付きで解説します。 クラス定義とインスタンス生成時のコンストラクタについて クラス内のメンバ変数を定義しよう インスタンスメソッドを定義しよう クラス変数とクラスメソッドについて クラスを継承してみよう インスタンスメソッドのオーバーライド クラス定義とインスタンス生成時のコンストラクタについて JavaScriptでは、クラスの定義は関数の定義と同様に『function』を用いて定義します。 関数名がクラス名となり、関数内の処理がクラスのコンストラクタとなります。 定義したクラスをイ
arguments.callee - JavaScript | MDN
callee は arguments オブジェクトのプロパティです。これは、現在実行中の関数を、その関数本体の内部で参照するために使用することができます。これは、名前のない関数式（「無名関数」とも呼ばれる）の中など、関数名が不明な場合に便利です。 警告: ECMAScript 第 5 版では、 arguments.callee() を厳格モードで使用することを禁止しています。関数式に名前を付けるか、関数が自分自身を呼び出すような関数宣言を行うことで、 arguments.callee() の使用を避けることができます。
[JavaScript] arguments をサクッと配列に変換する方法 - tmlife
だれもが一度はひっかかったことがあるであろうこれ var hoge = function() { var str = arguments.join(','); console.log(str); }; hoge('a', 'b', 'c'); 実際に runstant で動かすと join は関数じゃないよ って エラーがでているのがわかるかと思います. [runstant] これは arugments は配列っぽいけど配列ではない為, 配列系のメソッドが使えずに起きるエラーです. ただ arguments に配列のメソッドを適応したいって場面はよくあると思うので その解決方法を紹介します. arguments を Array に変換 Array.prototype.slice.call に arguments を渡すことで 配列に変換することができます. var hoge = funct
解決：window.open()を使いつつIEでRefererを渡す方法 | @blog.justoneplanet.info
■読む前に知って欲しい事 window.open()を使って他のHTMLファイルを開くと、IE以外のブラウザはちゃんとリクエストヘッダーに『Refererをつけて』くれる。 ■InternetExplorer（以下、IE）は？ 例えば、 window.open(“test.html”,”sub”●●●●●●) ; とすると、なんとRefererをセットしない。 ■困る事 アクセスログを取る際に困る セキュリティ上の理由でRefererが必須になる場合、window.open()が使えない ■従来の解決策 target=”_blank”で通常通りリンクする ■これからの解決策 まず、これがソースだ！ function createHttpRequest(){ if(window.XMLHttpRequest){ return new XMLHttpRequest(); } else{ if(
指定範囲内にタブ移動の範囲を制限するjQuery拡張 - Qiita
指定範囲内にタブ移動の範囲を制限するjQuery拡張 カスタムダイアログの範囲にフォーカスを制御したいときとかに よくあるダイアログ範囲外にタブフォーカスが回りこんじゃう奴の防止。 jQuery.ui.dialogの手法がいいなーって思ったのでそこだけ使えるようにしてみた。 セレクタの範囲を広げれば自由に制御可能。 でも最初と最後をつないでいるだけなので、範囲内での遷移順位はDOM生成順番に依存するはず。 (function($) { $.fn.tabChain = function(option) { option = $.extend({},{onReadyFocus:false},option); var chains = []; var init = function(){ var first = chains[0]; var last = chains[chains.length
別ウィンドウ（ポップアップ）表示 | jQuery逆引き | Webサイト制作支援 | ShanaBrian Website
ライブラリのダウンロードと設置 「ライブラリのダウンロード」をクリックしてダウンロードしてください。 ライブラリのダウンロード ダウンロードしたjquery.openwin.jsを任意の場所へ置き読み込みます。 （jQueryの設置および読み込みは、完了もしくは同時作業を行っているものとします。） <script type="text/javascript" src="jquery.openwin.js"></script> 準備 JavaScript 設定したい要素などを指定し、実行します。 $(document).ready(function() { $('.openwin').openwin(); }); HTML 上記で設定した内容を割り当てます。 <a href="http://www.google.co.jp/" class="openwin">Google</a>
jQueryで「window．open」タイプのポップアップウィンドウ方法｜BLACKFLAG
jQueryでのポップアップウィンドウといえば、ThickboxやLightBoxの様なモーダルウィンドウタイプが主流になってきていますが、そうではない単純な『target=”_blank”』『window.open』タイプのブラウザ別枠型ポップアップウィンドウ（ウィンドウサイズの指定やウィンドウリサイズ指定有り）をjQueryで実現させる方法の紹介。 サンプルでは指定を加えるリンクに対してclassを付ける構成にしておきます。 （リンクに対してclass=”popup”を付けたものに対して指定を効かせます。） HTMLは以下のような記述に。 ◆HTML <a href="リンク先" class="popup">リンクテキスト</a> そしてスクリプトの記述は以下。 ◆SCRIPT $(function() { $(".popup").click(function(){ window.op
【jQuery】topに戻るスクロールボタン | Web Cafe
下に長いページだと、トップに戻るのがわずらわしかったりします。 そんな時に使う。 １．まずjQueryをヘッダーに呼び出す。 ２．以下のソースを好きな名前をつけjsフォルダに格納し（pagetop.jsとか）ヘッダーで読み込む $(document).ready(function(){ var pagetop = $('.pagetop'); $(window).scroll(function(){ if ( $(this).scrollTop() > 500 ) { pagetop.fadeIn(); } else { pagetop.fadeOut(); } }); pagetop.click(function () { $('body, html').animate({ scrollTop: 0 }, 500); return false; }); }); ３．ｈｔｍｌファイルの任意
[JS]実装は簡単でスマフォにも対応、縦長ページをスクロールする時にちょうどいい位置にスナップさせるスクリプト -Scrollify
section要素やdiv要素でパネルを垂直に配置した縦長ページをスクロールする時に、各パネルをちょうどいい位置にスナップさせるjQueryのプラグインを紹介します。 デスクトップのホイール操作、スマフォやタブレットなどのタッチ操作にも対応しています。 ちょうどいい位置に自動でスクロール スクロールはイージングやバウンドなど、さまざまなエフェクトが利用できます。 Scrollifyの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsとeasing.jsを</body>の上あたりに記述します。 jQueryは1.6+で、どれでも可です。 <body> ... <script src="script/jquery-1.6.js"></script> <!--<script src="script/jquery-2.1.1.js"></script>--> <!--<scri
[JavaScript] オブジェクトをループでまわす - Qiita
「そもそもオブジェクトをループで回したい場面なんてねぇよ！」 「潔く標準のメソッド使えよ！」といったツッコミを想定の上で書いております. ご承知の上でお読みください. フロー ふとオブジェクトをループで回したいってときに私がたどるフロー for in 使うか? いや keys で key 配列とってきて forEach で回したほうがカッコよくね？ obj.keys().forEach(...) ... あれ? エラー?? keys って Object の static メソッドかよ!! Object.keys(obj).forEach(...) これを今回は↓ forIn(...) 使お♪ で済ませちゃおうって tips です. よくやっちゃうダサいパターン for in でまわす. hasOwnProperty() 忘れがち. var human = { name: "phi", ag
![[JavaScript] オブジェクトをループでまわす - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/55322767a32d358fb082f59fa7d0dbf06c860d51/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGNzc1NiUyRnByb2ZpbGUtaW1hZ2VzJTJGMTQ3MzY4MDcwOD9peGxpYj1yYi00LjAuMCZhcj0xJTNBMSZmaXQ9Y3JvcCZtYXNrPWVsbGlwc2UmZm09cG5nMzImcz0yMDg5YWE2OTljNzUzNGQ3YWQzNDM1YjEwMWVhZjRiNQ%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253Dad1469ca61be031e845c1c818664c067%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCSmF2YVNjcmlwdCU1RCUyMCVFMyU4MiVBQSVFMyU4MyU5NiVFMyU4MiVCOCVFMyU4MiVBNyVFMyU4MiVBRiVFMyU4MyU4OCVFMyU4MiU5MiVFMyU4MyVBQiVFMyU4MyVCQyVFMyU4MyU5NyVFMyU4MSVBNyVFMyU4MSVCRSVFMyU4MiU4RiVFMyU4MSU5OSZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1wYWQ9MCZzPTU2NTBiMDAzZTVkNzdlM2JlNmYyZGI5ODFhNDVlMzkx%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBwaGkmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz1mNzA5ZDQyYTc3OGRkNzYxZDRkNmY1YjBiZDVhNWZmNw%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3Db1369548de9e766dcac13755046adfec)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
【javascript】やさしいクラスの作り方 - Qiita
Javascriptのcall/apply関数のプロっぽい使い方 〜 JSおくのほそ道 #014 - Qiita
[JavaScript] 配列(Array)の合計値, 平均値, 中央値をモダンに求める - Qiita![[JavaScript] 配列(Array)の合計値, 平均値, 中央値をモダンに求める - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/b7f706c8a17e12cc5f52f54fd6ce87f1be553376/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGNzc1NiUyRnByb2ZpbGUtaW1hZ2VzJTJGMTQ3MzY4MDcwOD9peGxpYj1yYi00LjAuMCZhcj0xJTNBMSZmaXQ9Y3JvcCZtYXNrPWVsbGlwc2UmZm09cG5nMzImcz0yMDg5YWE2OTljNzUzNGQ3YWQzNDM1YjEwMWVhZjRiNQ%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253Dad1469ca61be031e845c1c818664c067%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCSmF2YVNjcmlwdCU1RCUyMCVFOSU4NSU4RCVFNSU4OCU5NyUyOEFycmF5JTI5JUUzJTgxJUFFJUU1JTkwJTg4JUU4JUE4JTg4JUU1JTgwJUE0JTJDJTIwJUU1JUI5JUIzJUU1JTlEJTg3JUU1JTgwJUE0JTJDJTIwJUU0JUI4JUFEJUU1JUE0JUFFJUU1JTgwJUE0JUUzJTgyJTkyJUUzJTgzJUEyJUUzJTgzJTgwJUUzJTgzJUIzJUUzJTgxJUFCJUU2JUIxJTgyJUUzJTgyJTgxJUUzJTgyJThCJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9MzgwZGNjM2FjMDNjMmU2NzgzZWRmMzc3MmMzMGFkNzI%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBwaGkmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz1mNzA5ZDQyYTc3OGRkNzYxZDRkNmY1YjBiZDVhNWZmNw%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3Dc4caf131f00e11aa0d274bec49c26b0d)
Javascriptで数値の3桁区切りを実装 - Qiita
http://www.crystal-creation.com/web-app/tech/programming/javascript/grammar/function/class/
HTMLページ生成時のonclickより前に実行する関数を差し込む - Qiita
