Canvas ã®ãƒžã‚¦ã‚¹ã¨ã‚¿ãƒƒãƒã®ã‚¤ãƒ™ãƒ³ãƒˆã‚’表示ã™ã‚‹ãƒ—ãƒã‚°ãƒ©ãƒ
著者：関 å‹å¯¿ 公開日：2020å¹´1月7æ—¥ ã‚ーワード： javascript HTMLã®Canvasè¦ç´ ã«ãŠã‘るマウスã¨ã‚¿ãƒƒãƒã®ã‚¤ãƒ™ãƒ³ãƒˆã®å–り扱ã„ã‚’ç†è§£ã™ã‚‹ãŸã‚ã«ã€ç™ºç”Ÿã—ãŸã‚¤ãƒ™ãƒ³ãƒˆã®åå‰ã¨ä½ç½®ã‚’表示ãªãŒã‚‰ç·šã‚’æç”»ã™ã‚‹JavaScriptã®ãƒ—ãƒã‚°ãƒ©ãƒ を作æˆã—ãŸã€‚ Canvas 内ã®ã‚¹ãƒ¯ã‚¤ãƒ—を無効ã«ã™ã‚‹ クリア
グランブルーファンタジーã®ã‚³ãƒ¼ãƒ‰ã‚’ã¡ã‚‡ã£ã¨èªã‚“ã§ã¿ãŸ - mizchi's blog
ãªã‚“ã‹ã™ã”ã„無茶ã—ã¦ã¾ã™ã。 HTML5ã§æ™®é€šã«èªã‚ã‚‹ã®ã§ã€é©å½“ã«èªã‚“ã§ã¿ãŸã€‚都åˆãŒæ‚ªã‘ã‚Œã°è¨€ã£ã¦ãã ã•ã„ > Cygamesã•ã‚“ 大雑把ã«ã‚³ãƒ¼ãƒ«ã—ã¦ã‚‹ãƒ©ã‚¤ãƒ–ラリ㯠"jquery","underscore","backbone","easeljs","tweenjs","soundjs","movieclip","preloadjs","loadmanager","pex","typist", "flexslider","finger","socketio","subroute","uaparser" require.js 全体的ã«require.jsã«å¼·ãä¾å˜ã—ã¦ã„る。require.js㯠r.js使ã£ã¦ã¾ã¨ã‚ã¦minifyã§ãã‚‹ã‚“ã ã‘ã©ã€ä»Šå›žã¯ãれをã—ã¦ã„ãªãã¦ã€uglifyã‹ä½•ã‹ã§é›£èªåŒ–ã•ã‚Œã¦ã„ã‚‹ã ã‘。ãªã‚“ã ã‘ã©ã€åœ§ç¸®ã§ããªã„æ–‡å—列ベースã§ä¾å˜é–¢ä¿‚を表ç¾ã—ã¦ã„ã‚‹ãŸã‚ã€å¤–部ã‹ã‚‰éžå¸¸
ã¾ã ã¾ã é–“ã«åˆã†Canvasã§ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³å…¥é–€ï¼ˆã¾ã¨ã‚ã¨å®Ÿè·µï¼‰ :: 5509
JavaScript Advent Calendar 2010ã‚‚22日目ï¼ã‚ã¨3æ—¥ã§ã™ã‚ˆã€‚僕ã¯ã¡ã‚‡ã†ã©å¦ã‚“ã ã°ã‹ã‚Šã®Canvasをアウトプットもã‹ãã¦ã€ã¾ã¨ã‚ã¨å®Ÿè·µã‚’書ã„ã¦ã¿ã¾ã™ã€‚知るã“ã¨ã¨è¡Œã†ã“ã¨ã¯åŒä¸€ã§ã‚ã‚‹ã€æœ€è¿‘è¡Œã£ãŸã‚»ãƒŸãƒŠãƒ¼ã§ã‚‚言ã£ã¦ã¾ã—ãŸã€‚ jsdo.itã«ã¯ã»ã‚“ã¾ã«ã“ã‚ŒCanvasãªã‚“？ãªã‚µãƒ³ãƒ—ルã„ã£ã±ã„ã‚ã‚Šã¾ã™ã。ã‚ーã„ã†ã®æ›¸ã‘るよã†ã«ãªã‚ŠãŸã„ãªãã¨ã‹æ€ã„ã¤ã¤ã€jQueryã°ã£ã‹ã‚Šã•ã‚ã£ã¦ãŸåƒ•ã¯.animate()メソッドã®ä¾¿åˆ©ã•ã«å–り憑ã‹ã‚Œã¦ã„ãŸã®ã§ã€Canvasã®çµµã‚‚ã¾ã 上下左å³ã§å‹•ã‹ã™ãらã„ã—ã‹ã§ãã¾ã›ã‚“。慣れãŒå¿…è¦ã§ã™ã€‚。 ã©ã†ã§ã‚‚ã„ã„æƒ…å ±ã¨ã—ã¦Canvasã®èªã¿æ–¹ãªã‚“ã§ã™ã‘ã©ã€ã€Œã‚ャンãƒã‚¹ã€ã˜ã‚ƒãªãã¦ã€Œã‚«ãƒ³ãƒã‚¹ã€ãŒæ£ã—ã„よã†ã§ã™ã€‚ã‚ャンãƒã‚¹ãƒ»ã‚«ãƒ³ãƒã‚¹ã©ã£ã¡ã§ã‚‚よã•ã’。僕ã¯ã‚ャンãƒã‚¹ã£ã¦èªã‚“ã§ã¾ã—ãŸã€‚ã‘ã©ã‚«ãƒ³ãƒã‚¹ã«ã—ã¾ã™ã€‚ å‰ç½®ãã¯ã“ã‚Œãらã„ã«ã—ã¦ã€ä»Šå›žã¯æ¬¡ã®ã‚ˆã†ãªã‚«ãƒ©
Android × Canvas ã®å³æ»ãƒã‚¤ãƒ³ãƒˆã¨ãã®å›žé¿ç– | buccchi.jp
CreateJS を使ã£ãŸWebアプリをã„ãã¤ã‹ä½œã£ãŸã®ã§ã™ãŒã€iPhone ã¯ã‚µã‚¯ã‚µã‚¯ã§ã‚‚ Android ã§ã‚„ãŸã‚‰ãƒãƒžã‚‹ã€‚ Android 2.3 ã§æœ€é©åŒ–ã—ãŸã¤ã‚‚ã‚Šã®ã‚‚ã®ãŒ 4.0 ã®æ¨™æº–ブラウザã§è½ã¡ãŸã‚Šã™ã‚‹ã€‚ 機種や OS ã®ãƒãƒ¼ã‚¸ãƒ§ãƒ³ã«ã‚ˆã‚Šå‹•ä½œãŒã•ã¾ã–ã¾ãªãŸã‚確èªã—ãã‚Œãªã„。 ã¨ã„ã†ã¨ã“ã§ãƒãƒžã£ãŸãƒã‚¤ãƒ³ãƒˆ3ã¤ã‚’共有ã—ã¾ã™ã€‚ 誰ã‹ã‚‚ã£ã¨ã‚ˆã„解決ç–ã‚’æ•™ãˆã¦ãれるã¨ã‚ã‚ŠãŒãŸã„。 å³æ»ãƒã‚¤ãƒ³ãƒˆãã®1 Android 4.0.4 㧠Canvas をリサイズã™ã‚‹ã¨ãƒ–ラウザãŒè½ã¡ã‚‹ 回é¿ç– Canvas é ˜åŸŸã‚’åºƒã‚ã«ã¨ã£ã¦ãŠãã€Canvas ã§ã¯ãªã Container å´ã‚’リサイズ。 ã¯ã¿ã§ãŸéƒ¨åˆ†ã¯ css ã§ãƒˆãƒªãƒŸãƒ³ã‚°ã€‚ ã“ã‚Œã§è½ã¡ãªãã¯ãªã‚‹ãŒå…¨ä½“çš„ã«ãƒœã‚±ã‚‹ã€‚ 2013.7.7 追記 ãã®å¾Œã€ä»¥ä¸‹ã®æ–¹æ³•ã‚’試ã—ãŸã¨ã“ã‚è½ã¡ãšã«å‹•ä½œã™ã“ã¨ãŒç¢ºèªã§ãã¾ã—ãŸã€‚ æç”»ã¨ã‹GPUアクセラレーション
S3上ã®ç”»åƒã‚’CORSを利用ã—ã¦Canvasã§ä½¿ã† - Tech-Sketch
Amazon S3ã§Cross-Origin Resource Sharing(CORS)ã¨ã„ã†ã‚‚ã®ãŒä½¿ãˆã‚‹ã‚ˆã†ã«ãªã£ã¦ã„ãŸã‚ˆã†ãªã®ã§ã€ã‚¯ãƒã‚¹ãƒ‰ãƒ¡ã‚¤ãƒ³ã§å–å¾—ã—ãŸç”»åƒã‚’Canvasã§åˆ©ç”¨ã™ã‚‹ç›®çš„ã§å®Ÿéš›ã«ä½¿ã£ã¦ã¿ã¾ã—ãŸã€‚ Cross Origin Resource Sharingã£ã¦ãªã‚“ã ã‚ㆠブラウザã§ã¯ã‚»ã‚ュリティã®ãŸã‚ã«Same Origin Policyã«ã‚ˆã£ã¦ã€ä»–ã®ã‚ªãƒªã‚¸ãƒ³(プãƒãƒˆã‚³ãƒ«ã¨ãƒ‰ãƒ¡ã‚¤ãƒ³ã¨ãƒãƒ¼ãƒˆç•ªå·ã®çµ„)ã¸ã®ãƒ‡ãƒ¼ã‚¿é€å—信を原則ç¦ã˜ã¦ã„ã¾ã™ã€‚ ã“ã®ã‚»ã‚ュリティ上ã®åˆ¶é™ã‚’回é¿ã™ã‚‹ã®ã«ã¯ä¸€èˆ¬çš„ã«ã¯ä»¥ä¸‹ã®ã‚ˆã†ãªæ–¹å¼ãŒã‚ã‚Šã¾ã™ã€‚ ReverseProxy ( éŽåŽ»ã®tech-sketch ) JSONP ã“ã‚Œã«åŠ ãˆã¦CORSã¨ã„ã†æ‰‹æ³•ãŒæ案ã•ã‚Œã¦æ¨™æº–化ã•ã‚Œã‚‹æ–¹å‘ã«å‘ã‹ã£ã¦ãŠã‚Šã€è¨˜äº‹ã‚’書ã„ã¦ã„る時点ã§ã¯å‹§å‘Šå€™è£œã®ã‚ˆã†ã§ã™ã€‚ CORSã«ã‚ˆã£ã¦ã€è‡ªåˆ†ã®Webアプリケーションã§ä»–ã®ã‚ªãƒªã‚¸ãƒ³
canvasè¦ç´ ã®åŸºæœ¬çš„ãªä½¿ã„æ–¹ã¾ã¨ã‚
Written by defghi1977@xboxLIVE.ã“ã®æ–‡æ›¸ã¯å…¨ã¦ãƒ†ã‚ストエディタã§ä½œæˆã—ã¦ã„ã¾ã™ï¼Žãˆãƒ¼ã¨ï¼Œãりゃもã†ã‚´ãƒªã‚´ãƒªã¨ï¼Ž 本文書ã¯svgè¦ç´ ã®åŸºæœ¬çš„ãªä½¿ã„æ–¹ã¾ã¨ã‚ã®å§‰å¦¹ç‰ˆã¨ã—ã¦ä½œæˆã‚’開始ã—ãŸï¼Žcanvasè¦ç´ ã®ä»•æ§˜ã¯ç¾åœ¨é€²è¡Œä¸ã§è‰²ã€…ã¨å¤‰åŒ–ã—ã¦ã„ã‚‹ãŸã‚，一ç‹ç¸„ã§è¡Œã‹ãªã„ãŒå¤§æ–¹ã®apiã«ã¤ã„ã¦æ›¸ã上ãŒã£ãŸã®ã§å…¬é–‹ã™ã‚‹ï¼ŽãªãŠï¼Œã¾ã 使ãˆãªã„機能ç‰æº€è¼‰ã ã£ãŸã‚Šï¼Œå†…容ã«é–“é•ã„ãŒã‚ã£ã¦ã‚‚ä¸ã€…検証ã™ã‚‹ã“ã¨ãŒã§ããªã„ã®ã§ï¼Œãã®éƒ¨åˆ†ã‚’了承ã—ãŸä¸Šã§ã”利用下ã•ã„… æ›´æ–°å±¥æ´ 2012/07/18 åˆç‰ˆ 1・canvasè¦ç´ ã®æ¦‚観 canvasè¦ç´ ã¨ã¯ canvasè¦ç´ ã¯html5ã§æŽ¡ç”¨ã•ã‚ŒãŸwebブラウザ上ã§ã‚°ãƒ©ãƒ•ã‚£ãƒƒã‚¯ã‚’æç”»ã™ã‚‹ãŸã‚ã®æ©Ÿæ§‹ã§ã‚り，webページã®æ©Ÿèƒ½æ€§ãƒ»è¦–èªæ€§ãŒé‡è¦è¦–ã•ã‚Œã‚‹æ˜¨ä»Šã§ã¯ï¼Œsvgè¦ç´ ã¨ä¸¦ã³é‡è¦ãªå½¹å‰²ã‚’æžœãŸã—ã¦ã„る．もã¨ã‚‚ã¨apple社ãŒè‡ªç¤¾è£½osã®æ©Ÿèƒ½å‘上ç–ã¨ã—ã¦ï¼ŒåŒ
ã“ã‚Œã¯è¦‹ã¦ãŠãã¹ãHTML5ã®Canvasを使ã£ãŸãƒ‡ãƒ¢é›†:phpspot開発日誌
21 Ridiculously Impressive HTML5 Canvas Experiments | Nettuts ã“ã‚Œã¯è¦‹ã¦ãŠãã¹ãHTML5ã®Canvasを使ã£ãŸå®Ÿé¨“集。 ã“ã“ã¾ã§å‡ºæ¥ã‚‹ã®ï¼Ÿã£ã¦ã„ã†ã‚µãƒ³ãƒ—ルãŒæº€è¼‰ã§ä¸€åº¦ã¯è¦‹ã¦ãŠããŸã„ã‚‚ã®ã°ã‹ã‚Šã§ã™ã€‚ 8 Bit Color Cycle Particle Letter Animation Particle System Strange Attractors Liquid Particles Fake Floor Reflections 次世代ã®WEBãŒæ¥½ã—ã¿ã§ã™ã€‚ 関連エントリ HTML5ã§å‹•ç”»ã‚„音声å†ç”Ÿã‚’å¯èƒ½ã«ã™ã‚‹ãƒ©ã‚¤ãƒ–ラリ集 HTML5ベースã®TODOリスト「5List〠CSSã§ã‚¯ãƒ¼ãƒ«ã«ãƒ‡ã‚¶ã‚¤ãƒ³ã•ã‚ŒãŸHTML5動画・音楽プレイヤー実装JS「MediaElement.js〠CSSã§ã‚¹ã‚ン作æˆãŒå¯èƒ½ãªHTML5動画プレイヤー実
スライドや動画ãªã©ã€HTML5ã®ã‚µãƒ³ãƒ—ルã„ãã¤ã‹ - ã‹ã¡ã³ã¨.net
個人的ãªãƒ¡ãƒ¢ã§ã™ã€‚スライドや å‹•ç”»ãªã©ã‚’HTML5を使ã£ã¦ 実装ã—ãŸã‚µãƒ³ãƒ—ルをã„ãã¤ã‹ 備忘録的ã«ãƒ¡ãƒ¢ã—ã¾ã™ã€‚ã“ã†ã„ ã†ã‚µãƒ³ãƒ—ル見ã¦ã‚‹ã¨æœªæ¥ãŒæ¥½ ã—ã¿ã«ãªã‚Šã¾ã™ã。 スタイル出æ¥ãªã„ブラウザãŒã‚ã‚‹é™ã‚Šã€å¾®å¦™ã§ã¯ã‚ã‚Šã¾ã™ãŒã€HTML5 ã‚’ IE ã‚„ Firefox 2 ã§ã‚‚使ãˆã‚‹ã‚ˆã†ã«ã™ã‚‹æ–¹æ³•ç‰ã‚‚出ã¦ã„ã‚‹ã®ã§é ã«å…¥ã‚Œã‚‹ãらã„ã¯ã—ã¦ãŠã„ã¦æãªã„ã‹ã‚‚。 サンプルã¯çµæ§‹ã‚ã‚‹ã®ã§ã™ãŒã€æ°—ã«ãªã£ãŸã‚‚ã®ã‚’ã„ãã¤ã‹ãƒ¡ãƒ¢ã€‚特ã«Flashã«å¯¾å¿œã—ãªã„ipadã‚„iPhoneã§ã‚‚動画をå†ç”Ÿã§ãã‚‹ã®ã¯ç´ 敵ã‹ã‚‚。 This presentation is an HTML5 website ã‚ーボードã®çŸ¢å°ã‚ーã§å‹•ãスライドã®ã‚µãƒ³ãƒ—ル。 This presentation is an HTML5 website CanvasVideo Canvasを使ã£ãŸãƒ“デオ。画é¢ã‚’クリックã™ã‚‹ã¨å‰²ã‚Œã‚‹ã‚¨ãƒ•ã‚§ã‚¯ãƒˆä»˜ã。 Canvas
HTML5デモ「日本全国花粉飛散マップã€ã‚’作ã£ã¦åˆ†ã‹ã£ãŸCreateJSã¨TypeScriptã§ã®åŠ¹çŽ‡çš„ãªé–‹ç™ºæ‰‹æ³• - ICS MEDIA
HTML5デモ「日本全国花粉飛散マップã€ã‚’作ã£ã¦åˆ†ã‹ã£ãŸCreateJSã¨TypeScriptã§ã®åŠ¹çŽ‡çš„ãªé–‹ç™ºæ‰‹æ³• 2013å¹´3月15æ—¥ã«é–‹å‚¬ã•ã‚ŒãŸCreateJS勉強会（第2回）ã§ç™ºè¡¨ã—ãŸWebサイト「日本全国花粉飛散マップã€ã§ã™ãŒã€CreateJSã¨TypeScriptを使ã£ã¦åˆ¶ä½œã—ã¾ã—ãŸã€‚ 今回ã®ä½œå“ã®ãƒã‚¤ãƒ³ãƒˆã¨ã—ã¦ã¯ã€æ¬¡ã®3点ãŒã‚ã’られã¾ã™ã€‚本記事ã§ã¯æ¬¡ã‚’具体的ã«èª¬æ˜Žã—ã¾ã™ã€‚ HTML5ã§åˆ¶ä½œã€ãƒ‡ã‚¹ã‚¯ãƒˆãƒƒãƒ—ã ã‘ã§ãªãスマートフォンやタブレットã§ã‚‚å†ç”Ÿå¯èƒ½ CreateJSã§ã€DOMã§ã¯ã§ããªã„HTML5 Canvasãªã‚‰ã§ã¯ã®è¡¨ç¾ TypeScriptを用ã„ã¦ä½Žå¦ç¿’コストã§åŠ¹çŽ‡çš„ãªåˆ¶ä½œã®å®Ÿç¾ スマートフォンやタブレットã§ã‚‚閲覧å¯èƒ½ ã“ã®Webサイトã¯ç’°å¢ƒçœãŒæä¾›ã—ã¦ã„る資料を元ã«ã€éŽåŽ»9年分ã®èŠ±ç²‰ã®é£›æ•£é‡ã‚’パーティクルを用ã„ã¦ãƒ“ジュアライズã—ãŸã‚‚ã®ã§ã™ã€‚花粉ã®é‡ã«æ¯”例ã—ã¦ã€ãƒ‘ーティ
Canvasã‹ã‚‰ç”»åƒæ›¸ã出ã—ã—ã¦Titaniumã«æ¸¡ã™ | 2BLOG
titaniumã®WebViewã«é…ç½®ã—ãŸcanvasã«æã„ãŸã‚¤ãƒ¡ãƒ¼ã‚¸ã‚’ファイルã«ä¿å˜ã™ã‚‹æ–¹æ³•ã€‚ ユーザーã«canvasã§ä½•ã‹ã‚’æã‹ã›ãŸã‚‰ãã®ãƒ‡ãƒ¼ã‚¿ã‚’ファイルã«ä¿å˜ã—ãŸã„ã“ã¨ã‚‚多ã„ã¯ãšã€‚作文メーカーを作ã£ãŸæ™‚ã«èª¿ã¹ãŸã¨ã“ã‚WebViewã®ä¸ã®canvasã¨titaniumã§ãƒ‡ãƒ¼ã‚¿ã‚’å—ã‘渡ã™æ–¹æ³•ãŒ2ã¤ã‚ã‚Šã¾ã—ãŸã€‚ 1.htmlファイル（canvasタグを書ã„ãŸhtmlファイル）ã®JavaScriptã§Titanium.App.fireEventã§ã‚¤ãƒ™ãƒ³ãƒˆã‚’é€ä¿¡ã—イベントオブジェクトã«canvasã®ãƒ‡ãƒ¼ã‚¿ã‚’添付ã™ã‚‹ã€‚ 2.titaniumã®jsã‹ã‚‰WebViewã®evalJSメソッドを使ã£ã¦ã€htmlファイルã«æ›¸ã„ãŸcanvasã®ãƒ‡ãƒ¼ã‚¿ã‚’returnã™ã‚‹JavaScriptを実行ã™ã‚‹ã€‚ 作文メーカーã§ã¯2ã®æ–¹æ³•ã‚’使ã£ã¦ã„ã¾ã™ã€‚ ã¾ãšã€canvasã§ã‚¤ãƒ¡ãƒ¼ã‚¸ãƒ‡ãƒ¼ã‚¿ã«å¤‰æ›ã™ã‚‹ã«ã¯toDataURL
1
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
jQuery Scratch Pad Plugin
CreateJS | A suite of JavaScript libraries and tools designed for working with HTML5
1ka2ka.com
‘Titanium’ カテゴリーã®ã‚¢ãƒ¼ã‚«ã‚¤ãƒ– | 2BLOG
{{#tags}}- {{label}}
{{/tags}}