ドットインストール代表ã®ãƒ©ã‚¤ãƒ•ãƒãƒƒã‚¯ãƒ–ãƒã‚°
IDEA * IDEA
ドットインストール代表ã®ãƒ©ã‚¤ãƒ•ãƒãƒƒã‚¯ãƒ–ãƒã‚°
ã¾ã ã¾ã é–“ã«åˆã†Canvasã§ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³å…¥é–€ï¼ˆã¾ã¨ã‚ã¨å®Ÿè·µï¼‰ :: 5509
JavaScript Advent Calendar 2010ã‚‚22日目ï¼ã‚ã¨3æ—¥ã§ã™ã‚ˆã€‚僕ã¯ã¡ã‚‡ã†ã©å¦ã‚“ã ã°ã‹ã‚Šã®Canvasをアウトプットもã‹ãã¦ã€ã¾ã¨ã‚ã¨å®Ÿè·µã‚’書ã„ã¦ã¿ã¾ã™ã€‚知るã“ã¨ã¨è¡Œã†ã“ã¨ã¯åŒä¸€ã§ã‚ã‚‹ã€æœ€è¿‘è¡Œã£ãŸã‚»ãƒŸãƒŠãƒ¼ã§ã‚‚言ã£ã¦ã¾ã—ãŸã€‚ jsdo.itã«ã¯ã»ã‚“ã¾ã«ã“ã‚ŒCanvasãªã‚“？ãªã‚µãƒ³ãƒ—ルã„ã£ã±ã„ã‚ã‚Šã¾ã™ã。ã‚ーã„ã†ã®æ›¸ã‘るよã†ã«ãªã‚ŠãŸã„ãªãã¨ã‹æ€ã„ã¤ã¤ã€jQueryã°ã£ã‹ã‚Šã•ã‚ã£ã¦ãŸåƒ•ã¯.animate()メソッドã®ä¾¿åˆ©ã•ã«å–り憑ã‹ã‚Œã¦ã„ãŸã®ã§ã€Canvasã®çµµã‚‚ã¾ã 上下左å³ã§å‹•ã‹ã™ãらã„ã—ã‹ã§ãã¾ã›ã‚“。慣れãŒå¿…è¦ã§ã™ã€‚。 ã©ã†ã§ã‚‚ã„ã„æƒ…å ±ã¨ã—ã¦Canvasã®èªã¿æ–¹ãªã‚“ã§ã™ã‘ã©ã€ã€Œã‚ャンãƒã‚¹ã€ã˜ã‚ƒãªãã¦ã€Œã‚«ãƒ³ãƒã‚¹ã€ãŒæ£ã—ã„よã†ã§ã™ã€‚ã‚ャンãƒã‚¹ãƒ»ã‚«ãƒ³ãƒã‚¹ã©ã£ã¡ã§ã‚‚よã•ã’。僕ã¯ã‚ャンãƒã‚¹ã£ã¦èªã‚“ã§ã¾ã—ãŸã€‚ã‘ã©ã‚«ãƒ³ãƒã‚¹ã«ã—ã¾ã™ã€‚ å‰ç½®ãã¯ã“ã‚Œãらã„ã«ã—ã¦ã€ä»Šå›žã¯æ¬¡ã®ã‚ˆã†ãªã‚«ãƒ©
canvasè¦ç´ + Javascriptã§ä½œã‚‹ã€å‹•çš„コンテンツ
HTML 5 + Javascriptã§ä½œã‚‹å‹•çš„ãªã‚³ãƒ³ãƒ†ãƒ³ãƒ„ å‰å›žã®æŽˆæ¥ã§ã¯ã€HTML 5ã«ã¤ã„ã¦ã€ãã®æˆã‚Šç«‹ã¡ã‚„特徴を解説ã—ãŸä¸Šã§ã€æ–°ã—ã„æ§‹é€ åŒ–ã®ãŸã‚ã®è¦ç´ ã«ã¤ã„ã¦è§£èª¬ã—ã¾ã—ãŸã€‚ã¾ãŸã€ã‚ã‚ã›ã¦CSS3ã«ã‚ˆã£ã¦æ ¼æ®µã«é€²æ©ã—ãŸè¡¨ç¾åŠ›ã«ã¤ã„ã¦å®Ÿéš›ã«ã‚µãƒ³ãƒ—ルページを作りãªãŒã‚‰è§£èª¬ã—ã¾ã—ãŸã€‚ 今ã¾ã§ã¯ã€Webページã§å‹•çš„ã«å›³ã‚„ç”»åƒã‚„アニメーションをæç”»ã™ã‚‹ã«ã¯FlashãŒä»£è¡¨çš„ãªé¸æŠžè‚¢ã§ã—ãŸã€‚ã—ã‹ã—ã€ã“ã“æ•°å¹´ã§ãã®çŠ¶æ³ãŒå¤§ããå‹•ãã¤ã¤ã‚ã‚Šã¾ã™ã€‚Flashã«ä»£è¡¨ã•ã‚Œã‚‹ã‚ˆã†ãªå‹•çš„ãªã‚³ãƒ³ãƒ†ãƒ³ãƒ„ãŒã€å°‚用ã®ãƒ—ラグイン無ã—ã«ã€HTMLã®è¦ç´ ã¨ãã‚Œã¨é€£æºã™ã‚‹ã‚¹ã‚¯ãƒªãƒ—トã ã‘ã§å®Ÿç¾ã§ãるよã†ã«ãªã‚Šã¤ã¤ã‚ã‚‹ã®ã§ã™ã€‚ã“ã†ã—ãŸæŠ€è¡“ã¯ã€ä»Šå¾Œã®Webã®å‹•å‘を大ãã変ãˆã‚‹å¯èƒ½æ€§ã‚’秘ã‚ãŸæŠ€è¡“ã¨ã—ã¦è„šå…‰ã‚’æµ´ã³ã¦ã„ã¾ã™ã€‚ HTML 5ã§å‹•çš„ã«ç”»åƒã‚„アニメーションを生æˆã™ã‚‹ãŸã‚ã«ã¯ã€canvasè¦ç´ ã¨ã„ã†æ–°è¦ã«å°Žå…¥ã•ã‚ŒãŸè¦ç´ ã¨ã€can
Face Detection in JavaScript via HTML5 Canvas
Badass JavaScriptA showcase of awesome JavaScript that pushes the boundaries of what's possible on the web, by @devongovett. You have probably seen face detection at work in programs like iPhoto and Picasa, but what if you could do that performantly in JavaScript?  Chinese developer Liu Liu has done the honors, and implemented the algorithm using the canvas element. The algorithm is implemented on
[JS]Canvasを使ã£ã¦ã€ãƒªã‚¢ãƒ«ã‚¿ã‚¤ãƒ ã«ãƒ’ートマップをæãスクリプト -real time heatmap
[JS]Canvasを使ã£ã¦ã€ãƒªã‚¢ãƒ«ã‚¿ã‚¤ãƒ ã«ãƒ’ートマップをæãスクリプト -real time heatmap real time heatmap デモ [ad#ad-2] デモã®ç”»åƒã®ä¸Šã§ãƒžã‚¦ã‚¹ã‚’å‹•ã‹ã™ã¨ã€ãã®å‹•ã„ãŸé‡ã«ä¼´ã„カラーãŒãƒ–ルーã€ã‚°ãƒªãƒ¼ãƒ³ã€ã‚¤ã‚¨ãƒãƒ¼ã€ãƒ¬ãƒƒãƒ‰ã¨ãƒžã‚¦ã‚¹ã®ç§»å‹•ã—滞在ã—ãŸé‡ã‚’ヒートマップã¨ã—ã¦ç”Ÿæˆã—ã¾ã™ã€‚ヒートマップã®ãƒ‡ãƒ¼ã‚¿ã¯ã‚¨ã‚¯ã‚¹ãƒãƒ¼ãƒˆã‚‚å¯èƒ½ã§ã™ã€‚ ã¾ãŸã€iPhoneã®ã‚·ãƒ³ã‚°ãƒ«ã‚¿ãƒƒãƒ—もサãƒãƒ¼ãƒˆã—ã¦ã„ã‚‹ã€ã¨ã®ã“ã¨ã§ã™ã€‚ スクリプトã¯jQueryãªã©ã®ä»–ã®ã‚¹ã‚¯ãƒªãƒ—トã¯ä¾å˜ã›ãšã€ä¸‹è¨˜ã®ã‚ˆã†ã«ãªã‚Šã¾ã™ã€‚ JavaScirpt /* Copyright (c) 2010, Patrick Wied. All rights reserved. Code licensed under the BSD License: http://patrick-wied.at/static/li
「Ai→Canvasã€ã‚¤ãƒ©ã‚¹ãƒˆã‚’HTML5å½¢å¼ã«å¤‰æ›ã™ã‚‹ç”»æœŸçš„プラグイン ã€å¢—ç”°@maskin真樹 | TechWave（テックウェーブ）
[èªäº†æ™‚é–“:1分] ç±³MicrosoftãŒé‹å–¶ã™ã‚‹MixOnlineãŒ10月12æ—¥ã€ã‚¢ãƒ‰ãƒ“・イラストレーターã®ãƒ•ã‚¡ã‚¤ãƒ«ã‚’HTML5ã®CANVASå½¢å¼ã«ã‚¨ã‚¯ã‚¹ãƒãƒ¼ãƒˆã§ãるプラグイン「Ai→Canvasã€ã‚’公開ã—ãŸã€‚CANVASå½¢å¼ã§è¡¨ç¾ã•ã‚ŒãŸã‚¤ãƒ©ã‚¹ãƒˆã¯æ‹¡å¤§ç¸®å°ã¯ã‚‚ã¡ã‚んアニメーションを施ã™ã“ã¨ãªã©ãŒå¯èƒ½ã«ãªã‚‹ã€‚ プラグインインストール後ã€ã‚¤ãƒ©ã‚¹ãƒˆãƒ¬ãƒ¼ã‚¿ãƒ¼ã®ã€Œæ›¸ã出ã—ã€ã‚³ãƒžãƒ³ãƒ‰ã‚’実行ã™ã‚‹ã¨CANVASå½¢å¼ã‚’é¸æŠžã§ãるよã†ã«ãªã‚‹ã€‚書ã出ã•ã‚Œã‚‹ã®ã¯HTMLファイルã§ã€ãƒ™ã‚¸ã‚§æ›²ç·šã¯ãã®ã¾ã¾ãƒ“ットマップ画åƒã¯ãƒ•ã‚¡ã‚¤ãƒ«ã¨ã—ã¦ä¿å˜ã•ã‚Œã‚‹ã€‚対応ブラウザã§è¡¨ç¤ºã™ã‚‹ã“ã¨ãŒã§ãる。（以下å‚照） 上ã®ã‚¹ãƒŠãƒƒãƒ—ショットã§CANVAS変æ›ã—ãŸãƒ™ã‚¸ã‚§ã®ã¿ã§ä½œæˆã•ã‚ŒãŸã‚¤ãƒ©ã‚¹ãƒˆã‚’以下ã§å…¬é–‹ã—ã¦ã„る。 http://blog.metamix.com/sample/NAOC_LOGO_Illustration.html ソースを
Canvasã‚¿ã‚°ã¨JavaScriptã§3Dã®ãƒ‡ãƒ¢ã‚’作ã£ã¦ã¿ã¾ã—㟠| ClockMaker Blog
HTML5ã¨ã„ã†ã‚ã‘ã§ã¯ãªã„ã§ã™ãŒã€Cavasã‚¿ã‚°ã¨JavaScriptを使ã£ã¦3Dã®ãƒ‡ãƒ¢ã‚’作ã£ã¦ã¿ã¾ã—ãŸã€‚ デモを見る ソースコード (ï¼»å³ã‚¯ãƒªãƒƒã‚¯ï¼½â†’［ソースを見る］をé¸æŠž) ã“ã†ã„ã†ã®ã‚’見れã°ã€ŒHTML5ã™ã”ã„ã€Flashã„らãªã„ã€ã¨æ€ã†äººã‚‚ã„ã‚‹ã‹ã‚‚ã§ã™ãŒã€å†·é™ã«ãƒ•ã‚¡ãƒ¼ã‚¹ãƒˆã‚¤ãƒ³ãƒ—レッションを。åŒã˜ã‚‚ã®ã‚’以å‰Flashã§å®Ÿè£…ã—ãŸã“ã¨ãŒã‚ã‚Šã¾ã™ãŒï¼ˆPapervision3D演出サンプルNo.01:ç¾½ã°ãŸãè¶ã€…）ã€ä¸¡è€…ã®ãƒ‡ãƒ¢ã‚’比較ã™ã‚‹ã“ã¨ã§ãƒ¡ãƒªãƒƒãƒˆãƒ»ãƒ‡ãƒ¡ãƒªãƒƒãƒˆãŒè¦‹ãˆã¦ãã¾ã™ã€‚ ＜追記：2013å¹´9月3日＞ Three.jsã®æœ€æ–°ç‰ˆrev 60ã«ã‚¢ãƒƒãƒ—デートã—ã¦ã¿ã¾ã—ãŸã€‚3å¹´å‰ã«ä½œæˆã—ãŸã¨ãã¯rev 17ã ã£ãŸã®ã§ã™ãŒã€åˆ¥ç‰©ã®ãƒ©ã‚¤ãƒ–ラリã¨è¨€ã‚ã‚“ã°ã‹ã‚Šã«ã»ã¨ã‚“ã©APIãŒå¤‰ã‚ã£ã¦ã—ã¾ã£ã¦ã„ã¾ã™ã€‚ã¡ãªã¿ã«TypeScriptã§æ›¸ããªãŠã—ã¦ã„ã¾ã™ã€‚ デモを見る ソースコード (TypeScript)
1
ランã‚ング
ランã‚ング
ランã‚ング
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
{{#tags}}- {{label}}
{{/tags}}