IBM DeveloperIBM Developer is your one-stop location for getting hands-on training and learning in-demand skills on relevant technologies such as generative AI, data science, AI, and open source.
Canvas APIã®åŸºç¤Ž
ã‚‚ã¨ã‚‚ã¨ã€AppleãŒä¸»ã«Dashboardウィジェットã®æç”»ã®ãŸã‚ã«WebKitã«å°Žå…¥ã—ãŸCanvas API。サンプルコードã¨è¦‹æ¯”ã¹ãªãŒã‚‰ã€åŠ¹çŽ‡è‰¯ãå¦ç¿’ã—よㆠCanvas APIã®åŸºç¤Ž 本連載ã§ã¯ã€Webブラウザ上ã§åˆ©ç”¨ã§ãるグラフィック技術を分ã‹ã‚Šã‚„ã™ã紹介ã—ã¦ã„ã¾ã™ã€‚今回ã¯HTML5ã®canvasè¦ç´ ã§ä½¿ãˆã‚‹2次元æ画コンテã‚ストã€ä¿—ã«ã„ã†ã€ŒCanvas APIã€ã‚’å–り上ã’ã¾ã™ã€‚ Canvas APIã¯ã€ã‚‚ã¨ã‚‚ã¨AppleãŒä¸»ã«Dashboardウィジェットã®æç”»ã®ãŸã‚ã«WebKitã«å°Žå…¥ã—ãŸã‚‚ã®ã§ã™ã€‚ãã‚ŒãŒFirefoxã‚„Operaã€Internet Explorer（9以é™ï¼‰ã«å®Ÿè£…ã•ã‚Œã€ç¾åœ¨ã¯W3Cã«ã‚ˆã£ã¦æ¨™æº–化ãŒé€²ã‚られã¦ã„ã¾ã™ã€‚JavaScriptã®ãƒ¡ã‚½ãƒƒãƒ‰ã§ç›´æŽ¥å›³å½¢ã‚’æç”»ã™ã‚‹ã®ãŒç‰¹å¾´ã§ã€ãƒ“ットマップ画åƒã®åŠ 工やã€ã‚²ãƒ¼ãƒ ã®ã‚ˆã†ãªã‚¤ãƒ³ã‚¿ãƒ©ã‚¯ãƒ†ã‚£ãƒ–性ã®é«˜ã„アプリケーションã«å‘
HTML5 Canvasã®ãƒ–ラウザã«ã‚ˆã£ã¦ç•°ãªã‚‹å¾®å¦™ãªæŒ¯ã‚‹èˆžã„ã«ã¤ã„ã¦ã¾ã¨ã‚ã¦ã¿ãŸã€‚ - 風ã¨å®‡å®™ã¨ãƒ—ãƒã‚°ãƒ©ãƒ
ã¯ã˜ã‚ã« Canvasã¯HTML5ã¨ã¯åˆ‡ã‚Šé›¢ã•ã‚ŒãŸç‹¬ç«‹ã—ãŸä»•æ§˜(HTML Canvas 2D Context)ã«ãªã£ã¦ã„るよã†ã§ã™ãŒã€ç¾çŠ¶ã®ãƒ–ラウザ上ã§ã®Canvasã®ã«ã¤ã„ã¦ã€æ™®æ®µã¯ã‚ã¾ã‚Šæ°—ã«ã—ãªã„微妙ãªæŒ¯ã‚‹èˆžã„ã«ã¤ã„ã¦èª¿ã¹ãŸçµæžœã‚’ã¾ã¨ã‚ã¦ã¿ã¾ã—ãŸã€‚ 調ã¹ãŸãƒ–ラウザã®å„ãƒãƒ¼ã‚¸ãƒ§ãƒ³ã¯ä»¥ä¸‹ã®é€šã‚Šã§ã™ã€‚ Firefox Chrome Safari Opera 3.6.8 6.0.490.1 dev 5.0.1 10.61 ç·šã‚’æã (lineTo) ãŸã ã®ç›´ç·šã‚’æãã ã‘ã®lineToã§ã™ãŒã€ãã®å˜ç´”ãªã‚‚ã®ã«ã‚‚ã€æらãã€å¤šãã®äººãŒæ™®æ®µã¯æ°—ã«ã—ãªã„よã†ãªå•é¡ŒãŒã‚ã‚Šã¾ã™ã€‚ãã‚Œã¯åº§æ¨™å€¤ã¨ã‚¢ãƒ³ãƒã‚¨ãƒªã‚¢ã‚¹ã§ã™ã€‚詳ã—ã見るå‰ã«ã€å®Ÿéš›ã®çµæžœã‚’示ã—ã¾ã—ょã†ã€‚下記ã®ã‚¤ãƒ¡ãƒ¼ã‚¸ä¸ã«æã‹ã‚Œã¦ã„ã‚‹ç·šã¯ã€ã„ãšã‚Œã‚‚ç·šå¹…(lineWidth)ãŒ1ã®ç·šã§ã™ã€‚ (å·¦ã‹ã‚‰ã€Firefox, Chrome, Safari, Opera
HTML5ã®Canvasã«æ¬ ã‘ã¦ã„ã‚‹ã‚‚ã®ï¼šãƒ•ãƒ¬ãƒ¼ãƒ ワーク ï¼ ï¼ IT
OSSプãƒã‚¸ã‚§ã‚¯ãƒˆã®ãƒ›ã‚¹ãƒ†ã‚£ãƒ³ã‚°ã‚µã‚¤ãƒˆã€ŒGitHub.comã€ã§ã¯ã€Flashã§å®Ÿè£…ã•ã‚Œã¦ã„ãŸä¸€éƒ¨ã®UIã‚’Canvasã«ç§»è¡Œã—ãŸã¨ã„ㆠHTML5ã®Canvasã¨Flashã®æœ€å¤§ã®é•ã„ã¯ã€ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ãªã©ã‚’è¡Œã†ãŸã‚ã«åˆ©ç”¨ã§ãる抽象レベルã ――。ã“ã†æŒ‡æ‘˜ã™ã‚‹ã®ã¯ã€Gitベースã®ã‚³ãƒ¼ãƒ‰ãƒ›ã‚¹ãƒ†ã‚£ãƒ³ã‚°ã‚µãƒ¼ãƒ“ス「GitHub.comã€ã®å…±åŒå‰µæ¥è€…ã€Tom Preston-Werneræ°ã （ã¡ãªã¿ã«Werneræ°ã¯ãƒžã‚¤ã‚¯ãƒã‚½ãƒ•ãƒˆã«è²·åŽã•ã‚ŒãŸæ¤œç´¢ãƒ™ãƒ³ãƒãƒ£ãƒ¼ã€ŒPowersetã€ã®å…ƒç¤¾å“¡ã§ã€è²·åŽç›´å¾Œã«â€œã‚µãƒ©ãƒªãƒ¼ä»¥å¤–ã«3å¹´é–“ã§30万ドル（約2770万円）â€ã¨ã„ã†ãŠã„ã—ã„オファーをæ–ã£ã¦ã¾ã§GitHub.comã®ãƒ•ãƒ«ã‚¿ã‚¤ãƒ 開発ã®é“ã‚’é¸ã‚“ã ã“ã¨ã§ã‚‚知られã¦ã„る）。 Flashã§æ›¸ã‹ã‚ŒãŸä¸€éƒ¨ã®UIã‚’å…¨é¢çš„ã«Canvasã§æ›¸ãç›´ã—ãŸçµŒé¨“ã‹ã‚‰Werneræ°ã¯ã€Canvasã«ã¯ã¾ã 抽象度ã®é«˜ã„フレーワムワークãŒæ¬ ã‘ã¦ã„
1
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
{{#tags}}- {{label}}
{{/tags}}