[B! canvas] ko-ya-maã®ãƒ–ãƒƒã‚¯ãƒžãƒ¼ã‚¯

ko-ya-ma id:ko-ya-ma

canvasã«é–¢ã™ã‚‹ko-ya-maã®ãƒ–ãƒƒã‚¯ãƒžãƒ¼ã‚¯ (24)

${{author_name}}$

{{{comment_expanded}}}

{{label}}

{{#is_bookmark}}ãƒªã‚¹ãƒˆ{{/is_bookmark}}{{^is_bookmark}}ãƒªãƒ³ã‚¯{{/is_bookmark}}

${{author_name}}$
{{author_name}}{{created}}
{{ #comment }}{{ comment }}{{ /comment }}
- {{ label }}

${{author_name}}$

{{{comment_expanded}}}

{{label}}

{{#is_bookmark}}ãƒªã‚¹ãƒˆ{{/is_bookmark}}{{^is_bookmark}}ãƒªãƒ³ã‚¯{{/is_bookmark}}

Zdog Â· Round, flat, designer-friendly pseudo-3D engine for canvas and SVG
Zdog Round, flat, designer-friendly pseudo-3D engine for canvas & SVG What is Zdog? Zdog is a 3D JavaScript engine for <canvas> and SVG. With Zdog, you can design and render simple 3D models on the Web. Zdog is a pseudo-3D engine. Its geometries exist in 3D space, but are rendered as flat shapes. This makes Zdog special. Zdog is small. 2,100 lines of code for the entire library. 28KB minified. Zdo
ko-ya-ma 2019/06/07
svgã§canvasã«æã„ãŸãƒ•ãƒ©ãƒƒãƒˆãªç”»åƒã‚’3DåŒ–ã™ã‚‹

svg

canvas

javascript

3d

animation
ãƒªãƒ³ã‚¯
[JS]ã•ã¾ã–ã¾ãªãƒ‡ãƒ¼ã‚¿ã‚’æœ€å°é™ã®è¨˜è¿°ã§ãƒ“ã‚¸ãƒ¥ã‚¢ãƒ«åŒ–ã™ã‚‹é«˜æ€§èƒ½ãªJavaScriptãƒ©ã‚¤ãƒ–ãƒ©ãƒª -Zeu.js
ã•ã¾ã–ã¾ãªãƒ‡ãƒ¼ã‚¿ã‚’æœ€å°é™ã®è¨˜è¿°ã§ãƒ“ã‚¸ãƒ¥ã‚¢ãƒ«åŒ–ã—ã€ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã§è¡¨ç¤ºã™ã‚‹é«˜æ€§èƒ½ãªJavaScriptãƒ©ã‚¤ãƒ–ãƒ©ãƒªã‚’ç´¹ä»‹ã—ã¾ã™ã€‚ ãƒ¡ãƒ¼ã‚¿ãƒ¼ã‚„ãƒ•ã‚¡ãƒ³ã‚„ã‚³ãƒ³ãƒˆãƒãƒ¼ãƒ©ãƒ¼ãªã©ã€ãƒ‡ã‚¶ã‚¤ãƒ³ãŒãƒ¬ãƒˆãƒãªã®ã‚‚é¢ç™½ã„ã§ã™ãã€‚ Zeu.js -GitHub ä¸Šè¨˜ã¯é™æ¢ç”»ã§ã™ãŒã€ã‚‚ã¡ã‚ã‚“ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã§å‹•ãã¾ã™ã€‚ ãƒ‡ãƒ¢ã®ã‚«ãƒ©ãƒ¼ã¯æ´¾æ‰‹ã§ã™ãŒã€ã‚ªãƒ—ã‚·ãƒ§ãƒ³ã§ç°¡å˜ã«å¤‰æ›´ã§ãã¾ã™ã€‚ My Command Center Zeu.jsã¯Canavasãƒ™ãƒ¼ã‚¹ã§ã€å¤–éƒ¨ãƒ•ã‚¡ã‚¤ãƒ«ã¨ç©ºã®canvasè¦ç´ ã‚’ç”¨æ„ã—ã€ã‚ã¨ã¯ã‚¿ã‚¤ãƒ—ã¨ãƒ‡ãƒ¼ã‚¿ã‚’å®šç¾©ã™ã‚‹ã ã‘ã§å®Ÿè£…ã§ãã¾ã™ã€‚  <script src="zeu.min.js"></script>  <canvas id="text-meter" width="200" height="100"></canvas> <script> //
ko-ya-ma 2018/09/13
javascript

canvas

dev

ui

library
ãƒªãƒ³ã‚¯
[JS]ã‚¹ãƒžãƒ›ã«æœ€é©åŒ–ã•ã‚ŒãŸå„ªã‚Œã‚‚ã®ï¼ã•ã¾ã–ã¾ãªãƒãƒ£ãƒ¼ãƒˆã‚„ã‚°ãƒ©ãƒ•ã‚’å®Ÿè£…ã§ãã‚‹Canvasãƒ™ãƒ¼ã‚¹ã®ãƒ©ã‚¤ãƒ–ãƒ©ãƒª -F2
ãƒãƒ£ãƒ¼ãƒˆã‚„ã‚°ãƒ©ãƒ•ã¯ã€ã•ã¾ã–ã¾ãªã‚¹ãƒžãƒ›ã‚¢ãƒ—ãƒªã§è¦‹ã‹ã‘ã¾ã™ã€‚ ã‚¹ãƒžãƒ›ã®ãƒ‡ãƒã‚¤ã‚¹ã«å¯¾ã—ã¦ãƒ‡ã‚¶ã‚¤ãƒ³ã€ã‚¤ãƒ³ã‚¿ãƒ©ã‚¯ã‚·ãƒ§ãƒ³ã€ãƒ‘ãƒ•ã‚©ãƒ¼ãƒžãƒ³ã‚¹ã«æœ€é©åŒ–ã•ã‚ŒãŸãƒãƒ£ãƒ¼ãƒˆã‚„ã‚°ãƒ©ãƒ•ã‚’å®Ÿè£…ã™ã‚‹HTML5 Canvasãƒ™ãƒ¼ã‚¹ã®ãƒ©ã‚¤ãƒ–ãƒ©ãƒªã‚’ç´¹ä»‹ã—ã¾ã™ã€‚ Node.jsã€React Nativeãªã©ã«äº’æ›æ€§ã‚‚ã‚ã‚Šã€50ç¨®é¡žä»¥ä¸Šã®ãƒãƒ£ãƒ¼ãƒˆã‚„ã‚°ãƒ©ãƒ•ã‚’ç°¡å˜ã«åˆ©ç”¨ã§ãã¾ã™ã€‚ ã‚¹ãƒžãƒ›å‘ã‘ã®ãƒ‡ã‚¶ã‚¤ãƒ³ ãƒ‡ã‚¶ã‚¤ãƒ³ã¯ã‚¹ãƒžãƒ›ã«æœ€é©åŒ–ã•ã‚Œã¦ãŠã‚Šã€è»½å¿«ãªã‚¤ãƒ³ã‚¿ãƒ©ã‚¯ã‚·ãƒ§ãƒ³ã§ãƒ‡ãƒ¼ã‚¿ã‚’ã‚ˆã‚Šè‡ªç„¶ã«è¡¨ç¤ºã—ã¾ã™ã€‚ ã‚¹ãƒžãƒ›ã«æœ€é©åŒ–ã•ã‚ŒãŸãƒ‘ãƒ•ã‚©ãƒ¼ãƒžãƒ³ã‚¹ è»½é‡ã§ã€ç´ æ™´ã‚‰ã—ã„ãƒ¬ãƒ³ãƒ€ãƒªãƒ³ã‚°ã®ãƒ‘ãƒ•ã‚©ãƒ¼ãƒžãƒ³ã‚¹ã‚’å®Ÿç¾ã€‚ äº’æ›æ€§ HTML5ã®Canvasãƒ™ãƒ¼ã‚¹ã§å®Ÿè£…ã•ã‚Œã¦ãŠã‚Šã€Node.jsã€React Nativeã§å®Ÿè¡Œã™ã‚‹ã“ã¨ã‚‚ã§ãã¾ã™ã€‚ ãƒ©ã‚¤ã‚»ãƒ³ã‚¹ MITãƒ©ã‚¤ã‚»ãƒ³ã‚¹ã§ã€å€‹äººã§ã‚‚å•†ç”¨ã§ã‚‚ç„¡æ–™ã§åˆ©ç”¨ã§ãã¾ã™ã€‚ F2ã®ãƒ‡ãƒ¢ ã¾ãšã¯ã‚¹ãƒžãƒ›ã®ã‚¢ãƒ—ãƒªã§ã‚ˆãè¦‹ã‹ã‘ã‚‹ã€ç¾Žã—ã„ãƒ‡ã‚¶ã‚¤ãƒ³ã¨
ko-ya-ma 2018/08/31
canvas

dev

javascript

graph
ãƒªãƒ³ã‚¯
WebRTCã‚’è©¦ã™ã¨ãã«ã‚ªãƒƒã‚µãƒ³ãŒæ˜ ã‚Šç¶šã‘ã‚‹å•é¡Œã«å¯¾å‡¦ã™ã‚‹ - Qiita
ã¯ã˜ã‚ã« WebRTCã‚’ä½¿ã£ãŸã‚¢ãƒ—ãƒªã‚’ä½œã‚‹éš›ã«ã€åˆ‡ã£ã¦ã‚‚åˆ‡ã‚Œãªã„ã®ãŒã‚«ãƒ¡ãƒ©æ˜ åƒã®å–å¾—ã§ã™ã€‚ãƒŽãƒ¼ãƒˆåž‹ã®PCã§ä½œæ¥ã—ãŸã‚Šã™ã‚‹ã¨ã€å»¶ã€…ã¨è‡ªåˆ†ã®é¡”ã‚’è¦‹ç¶šã‘ãªã‘ã‚Œã°ãªã‚Šã¾ã›ã‚“ã€‚ãã“ã§ã€è‡ªåˆ†ã®é¡”ã®æ›¿ã‚ã‚Šã«å¥½ããªå‹•ç”»ã‚’ãƒ¡ãƒ‡ã‚£ã‚¢ã‚¹ãƒˆãƒªãƒ¼ãƒ ã¨ã—ã¦æµã™ã‚µãƒ³ãƒ—ãƒ«ã‚’ä½œã£ã¦è¦‹ã¾ã—ãŸã€‚ ä»•çµ„ã¿ å‹•ç”»ãƒ•ã‚¡ã‚¤ãƒ«ã®å¤‰æ› ãƒ¦ãƒ¼ã‚¶ã«ãƒãƒ¼ã‚«ãƒ«ã®å‹•ç”»ãƒ•ã‚¡ã‚¤ãƒ«ã‚’æŒ‡å®šã—ã¦ã‚‚ã‚‰ã†ï¼ˆãƒ•ã‚¡ã‚¤ãƒ«é¸æŠž or ãƒ‰ãƒ©ãƒƒã‚°ï¼†ãƒ‰ãƒãƒƒãƒ—ï¼‰ Fileã‚ªãƒ–ã‚¸ã‚§ã‚¯ãƒˆã‹ã‚‰URLã‚’ç”Ÿæˆ (window.URL.createObjectURLã‚’åˆ©ç”¨ï¼‰ ãã‚Œã‚’Videoã‚¿ã‚°ã§å†ç”Ÿ ç¶™ç¶šçš„ã«Canvasã‚¿ã‚°ã«è»¢å†™ (window.requestAnimationFrameã‚’åˆ©ç”¨ï¼‰ Canvasã‚¿ã‚°ã‹ã‚‰MediaStreamã‚’å–ã‚Šå‡ºã™ (Canvas.captureStreamã‚’åˆ©ç”¨ï¼‰ éŸ³å£°ãƒ•ã‚¡ã‚¤ãƒ«ã®å¤‰æ› ãƒ¦ãƒ¼ã‚¶ã«ãƒãƒ¼ã‚«ãƒ«ã®éŸ³å£°ãƒ•ã‚¡ã‚¤ãƒ«ã‚’æŒ‡å®šã—ã¦ã‚‚ã‚‰ã†ï¼ˆãƒ•ã‚¡ã‚¤ãƒ«é¸æŠž or
ko-ya-ma 2016/07/27
canvas

movie

dev

tips

browser
ãƒªãƒ³ã‚¯
JavaScriptã§ã‚°ãƒ©ãƒ•æç”»å…¥é–€ï¼å…¨ï¼˜å€‹ã®ãƒ©ã‚¤ãƒ–ãƒ©ãƒªã‚’ã‚³ãƒ¼ãƒ‰ä»˜ãã§ä¸€æŒ™ã«è§£èª¬ï¼ - paiza times
ã©ã†ã‚‚ã€ã¾ã•ã¨ã‚‰ã‚“ï¼ˆ@0310lanï¼‰ã§ã™ã€‚ ä»Šå›žã¯ã€JavaScriptã‚’ä½¿ã£ã¦ã€Œã‚°ãƒ©ãƒ•ã‚„ãƒãƒ£ãƒ¼ãƒˆã‚’æããŸã„ï¼ã€ã¨ã‹ã€ã€Œã•ã¾ã–ã¾ãªãƒ‡ãƒ¼ã‚¿ã‚’å¯è¦–åŒ–ã•ã›ãŸã„ï¼ã€ã¨ã„ã†äººã«ã‚ªã‚¹ã‚¹ãƒ¡ã®JSãƒ©ã‚¤ãƒ–ãƒ©ãƒªã‚’ã”ç´¹ä»‹ã—ã‚ˆã†ã¨æ€ã„ã¾ã™ã€‚ ã¾ãŸã€ã™ãã«ä½¿ã„å§‹ã‚ã‚‰ã‚Œã‚‹ã‚ˆã†ã«ã€ãƒŸãƒ‹ãƒžãƒ ãªæ§‹æˆã®ã€Œã‚µãƒ³ãƒ—ãƒ«ã‚³ãƒ¼ãƒ‰ã€ã‚‚åˆã‚ã›ã¦æŽ²è¼‰ã—ã¦ã„ã‚‹ã®ã§ã€è‡ªåˆ†ã«åˆã£ãŸãƒ©ã‚¤ãƒ–ãƒ©ãƒªã‚’ä½¿ã†å–ã£æŽ›ã‹ã‚Šã«ãªã‚Œã°å¹¸ã„ã§ã™ã€‚ â– Chart.js ã€Chart.jsã€‘ æœ€è¿‘ã€æ´»ç™ºã«ãƒãƒ¼ã‚¸ãƒ§ãƒ³ã‚¢ãƒƒãƒ—ã‚’ã—ã¦ã„ã‚‹ã€ŒChart.jsã€ã¯ã€ã™ã¹ã¦ã®ã‚°ãƒ©ãƒ•ãŒè‡ªå‹•çš„ã«ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³è¡¨ç¤ºã•ã‚Œã‚‹ãƒ¦ãƒ‹ãƒ¼ã‚¯ãªä»•æŽ›ã‘ã‚’æŒã£ã¦ãŠã‚Šã€ã‚·ãƒ³ãƒ—ãƒ«ã§ç†è§£ã—ã‚„ã™ã„è¨˜è¿°ãŒå‡ºæ¥ã‚‹ç‚¹ã‚‚é…åŠ›ã§ã™ã€‚ ã‚°ãƒ©ãƒ•ã®ç¨®é¡žã¯å°‘ãªã„ã‚‚ã®ã®ã€ãƒ¢ãƒ€ãƒ³ãƒ–ãƒ©ã‚¦ã‚¶ï¼†ãƒ¬ã‚¹ãƒãƒ³ã‚·ãƒ–å¯¾å¿œã§ã€ã‚ã¾ã‚Šã‚«ã‚¹ã‚¿ãƒžã‚¤ã‚ºã›ãšã«ã€Œãƒ‡ãƒ•ã‚©ãƒ«ãƒˆã€ã®ã¾ã¾ã§ã‚‚æ‰‹è»½ã«ä½¿ãˆã‚‹ã§ã—ã‚‡ã†ã€‚ ã€ åŸºæœ¬ã®æ›¸ãæ–¹ ã€‘ ã€Œchart.jsã€ãƒ•ã‚¡ã‚¤ãƒ«ã¯ã€å…¬å¼
ko-ya-ma 2016/06/08
chart

javascript

canvas

dev
ãƒªãƒ³ã‚¯
CreateJSã¨Node.jsã‚’ä½¿ã£ã¦ã‚µãƒ¼ãƒãƒ¼ã‚µã‚¤ãƒ‰ã§Canvasã‚’æ‰±ãŠã†â€“ICS LAB
HTML5 Canvasã®ãƒ•ãƒ¬ãƒ¼ãƒ ãƒ¯ãƒ¼ã‚¯ã€ŒCreateJSã€(åŸºæœ¬çš„ãªä½¿ã„æ–¹ã¯å…¥é–€ã‚µã‚¤ãƒˆã‚’ã”è¦§ãã ã•ã„ï¼‰ã«ã¤ã„ã¦ã€2015å¹´2æœˆ10æ—¥ã«é–‹å‚¬ã•ã‚ŒãŸCreateJSå‹‰å¼·ä¼š (ç¬¬5å›ž) ã§ãƒ©ã‚¤ãƒˆãƒ‹ãƒ³ã‚°ãƒˆãƒ¼ã‚¯ã€ŒCreateJSã¨Node.jsã‚’ä½¿ã£ã¦ã‚µãƒ¼ãƒãƒ¼ã§Canvasè¦ç´ ã‚’ä½¿ãŠã†ã€ã‚’ç™ºè¡¨ã—ã¾ã—ãŸã€‚ä»Šå›žã¯ãã®ã‚¹ãƒ©ã‚¤ãƒ‰ã‚’å…ƒã«ã€ã‚µãƒ¼ãƒãƒ¼ã‚µã‚¤ãƒ‰ã§CreateJSã‚’ä½¿ã†ãƒ¡ãƒªãƒƒãƒˆã‚’ç´¹ä»‹ã—ã¾ã™ã€‚ ãƒ‡ãƒ¢ ä»Šå›žç´¹ä»‹ã™ã‚‹node-easelã‚’ä½¿ã£ãŸãƒ‡ãƒ¢ã§ã™ã€‚ã‚¹ãƒžãƒ›ç”»é¢ã«Twitterã®ã‚¢ã‚¤ã‚³ãƒ³ãŒã€PCç”»é¢ã«ã¯ç™½ã„çŸ©å½¢ãŒè¡¨ç¤ºã•ã‚Œã¦ã„ã¾ã™ã€‚ã‚¹ãƒžãƒ›ã§é¸ã‚“ã Twitterã®ãƒ¦ãƒ¼ã‚¶ãƒ¼ã®ã‚¢ã‚¤ã‚³ãƒ³ãŒPCå´ã§ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã—ã¾ã™ã€‚ç”»åƒåŠ å·¥ã¯ã‚µãƒ¼ãƒãƒ¼ã‚µã‚¤ãƒ‰ã§å‹•ãCreateJSã‚’ä½¿ã£ã¦è¡Œã‚ã‚Œã¦ã„ã¾ã™ã€‚ Section1. Node.jsã¨ãƒ¢ã‚¸ãƒ¥ãƒ¼ãƒ«ã«ã¤ã„ã¦ Node.jsã¯ãƒ–ãƒ©ã‚¦ã‚¶ã§ã¯ãªãã‚µãƒ¼ãƒãƒ¼ã‚µã‚¤ãƒ‰ã§å‹•ãJavaScript
ko-ya-ma 2015/02/19
canvas

node.js

JavaScript

dev
ãƒªãƒ³ã‚¯
Code Sketch
Code Sketchã¯2014å¹´5æœˆã‹ã‚‰å§‹ã‚ãŸCodePenã§æ›¸ãæ®‹ã—ã¦ããŸJavaScriptã«ã‚ˆã‚‹ã‚¹ã‚±ãƒƒãƒã®è¨˜éŒ²ã§ã™ã€‚ Code Sketch is the collection of the sketch with code, Javascript on CodePen from May 2014.
ko-ya-ma 2015/02/17
code

javascript

canvas

demo

animation
ãƒªãƒ³ã‚¯
React Canvasã«ã‚ˆã‚‹ãƒ¢ãƒã‚¤ãƒ«ãƒ–ãƒ©ã‚¦ã‚¶ã®UIæ”¹å–„ã¨ãã‚ŒãŒèµ·ãã‚‹å¿…ç„¶ - ãƒ¯ã‚¶ãƒŽãƒ | wazanova
http://engineering.flipboard.com/2015/02/mobile-web/ 1 comment | 0 points | by WazanovaNews â– comment by Jshiike | ç´„4æ™‚é–“å‰ ã‚‚ã®ã”ã¨ãŒé€²åŒ–ã™ã‚‹ã¨ã€åˆ©ç”¨ã™ã‚‹ãƒ¦ãƒ¼ã‚¶ã®æº€è¶³åº¦ã¯ã‚ãŒã‚‹ã®ã§ã€ãã‚Œã‚’ç”¨æ„ã™ã‚‹ä½œæ¥é‡ã¯ãƒ„ãƒ¼ãƒ«ã®æ”¹å–„ã«å¾“ã£ã¦æœ€çµ‚çš„ã«ã¯æ¸›ã£ã¦ã„ãã®ã‹ï¼Ÿ ã‚¹ãƒžãƒ›ãŒç™»å ´ã—ã¦ã€ã‚¢ãƒ—ãƒªä¸Šã§ã®ã‚¹ãƒ¯ã‚¤ãƒ—ãªã©ã®ç›´æ„Ÿçš„ã«ã§ãã‚‹æ“ä½œã‚„è¡¨ç¾ã®å¹…ãŒåºƒãŒã‚Šã€ã¾ãŸãƒ‡ã‚£ã‚¹ãƒ—ãƒ¬ã‚¤ã‚‚æ”¹å–„ã€‚ã§ã¯ã€ãƒ—ãƒãƒ€ã‚¯ãƒˆã‚’ã¤ãã‚‹å´ãŒãã‚Œã«æ…£ã‚Œã¦ãã‚‹ã¨ã€ä½œæ¥é‡ãŒæ¸›ã‚‹ã®ã‹ï¼Ÿã„ã‚„ã€ç¾å®Ÿã¯é€†ã€‚åŒã˜ã“ã¨ã‚’å®Ÿç¾ã™ã‚‹ä½œæ¥é‡ã¯æ¸›ã£ã¦ã‚‚ã€ãƒˆãƒ¼ã‚¿ãƒ«ã§ã¯æ¸›ã‚‰ãªã„ã€‚ãƒ–ãƒ©ã‚¦ã‚¶ã¨ã‚¢ãƒ—ãƒªã«ã¾ãŸãŒã£ã¦ã€åŒæ–¹ã®ãƒ¡ãƒªãƒƒãƒˆã‚’å–ã‚Šè¾¼ã‚‚ã†ã¨ã€ã‚‚ã£ã¨ãƒ¬ãƒ™ãƒ«ã®é«˜ã„UIã‚’ç›®æŒ‡ã—ãŸç«¶äº‰ãŒç¶šã„ã¦ã„ã¾ã™ã€‚ David BellonaãŒTwitter Universityã§ã®
ko-ya-ma 2015/02/12
canvas

react

JavaScript

UI

dev
ãƒªãƒ³ã‚¯
Fabric.js Javascript Canvas Library
Fabric.js is a powerful and simple Javascript HTML5 canvas library Fabric provides interactive object model on top of canvas element Fabric also has SVG-to-canvas (and canvas-to-SVG) parser Using Fabric.js, you can create and populate objects on canvas; objects like simple geometrical shapes
ko-ya-ma 2015/02/09
ã‚ã‹ã‚Šã‚„ã™ã„ã€‚ä½¿ã„ã‚„ã™ã„

canvas

javascript

library

html5

SVG

animation

json
ãƒªãƒ³ã‚¯
IDEA * IDEA
ãƒ‰ãƒƒãƒˆã‚¤ãƒ³ã‚¹ãƒˆãƒ¼ãƒ«ä»£è¡¨ã®ãƒ©ã‚¤ãƒ•ãƒãƒƒã‚¯ãƒ–ãƒã‚°
ko-ya-ma 2014/12/02
canvas

idea

javascript

3D

ãƒã‚¿
ãƒªãƒ³ã‚¯
HTML5 Canvasã‚’jQueryãƒ©ã‚¤ã‚¯ã«æ“ä½œã§ãã‚‹ãƒ—ãƒ©ã‚°ã‚¤ãƒ³ã€ŒjCanvasã€
ã¯ã˜ã‚ã« HTML5ã«ãŠã„ã¦è¿½åŠ ã•ã‚ŒãŸCanvasã¯ã€HTMLã¨JavaScriptã‚’ç”¨ã„ã¦Webãƒšãƒ¼ã‚¸å†…ã«å›³å½¢ã‚„ç·šãªã©ã‚’æç”»ã§ãã‚‹æ©Ÿèƒ½ã§ã€å‹•ç”»ã‚„éŸ³æ¥½ã‚’å†ç”Ÿã™ã‚‹videoã‚¿ã‚°ã‚„audioã‚¿ã‚°ãªã©ã¨ã¨ã‚‚ã«ã€HTML5ã®ä»£è¡¨çš„ãªæ©Ÿèƒ½ã¨ã—ã¦ã—ã°ã—ã°ç´¹ä»‹ã•ã‚Œã¾ã™ã€‚ Canvasæ©Ÿèƒ½ã‚’ç”¨ã„ã‚‹ã¨HTMLã®canvasè¦ç´ ã§å®šç¾©ã•ã‚ŒãŸé ˜åŸŸã«å¯¾ã—ã¦JavaScriptã§æç”»å‡¦ç†ã‚’è¡Œãˆã¾ã™ã€‚ä»¥ä¸‹ã®ã‚ˆã†ãªæç”»ã‚’è¡Œã†APIãŒæä¾›ã•ã‚Œã¦ã„ã¾ã™ã€‚ ç·šï¼ˆç›´ç·šã€æ›²ç·šï¼‰ å›³å½¢ï¼ˆå››è§’å½¢ã€å††ï¼‰ è‰²ã¨ã‚¹ã‚¿ã‚¤ãƒ«ï¼ˆå˜è‰²ã€ã‚°ãƒ©ãƒ‡ãƒ¼ã‚·ãƒ§ãƒ³ã€å½±ï¼‰ æ–‡å—ã®æç”»ï¼ˆã‚µã‚¤ã‚ºã€ãƒ•ã‚©ãƒ³ãƒˆã€è‰²ã®æŒ‡å®šï¼‰ å¤‰å½¢ï¼ˆæ‹¡å¤§ã€å›žè»¢ã€ãƒžãƒˆãƒªã‚¯ã‚¹å¤‰æ›ï¼‰ ã—ã‹ã—ã€Canvasæç”»å‡¦ç†ã®JavaScript APIã¯ã‚°ãƒ©ãƒ•ã‚£ãƒƒã‚¯ã‚¹å‡¦ç†ç‹¬ç‰¹ã®è¨˜è¿°æ–¹æ³•ã¨ãªã£ã¦ãŠã‚Šã€å¦ç¿’ã®ãƒãƒ¼ãƒ‰ãƒ«ã¯ãã‚Œãªã‚Šã«é«˜ã„ã‚‚ã®ã«ãªã£ã¦ã„ã¾ã™ã€‚ ä»Šå›žç´¹ä»‹ã™ã‚‹jCanvasã¯ã€HTML5 Canvasã®æ©Ÿ
ko-ya-ma 2014/08/04
canvas

jquery

html5
ãƒªãƒ³ã‚¯
KineticJS
KineticJS is a fast, robust, HTML5 Canvas Library that is no longer maintained. The last stable version is v5.1.0, and it's pretty darn solid. You can find the github project here. I am also no longer maintaining the CDN which hosted KineticJS files. If your site was using KineticJS hosted on Amazon's S3 CDN services, I'm very sorry for having to pull the plug, but it was getting very costly. For
ko-ya-ma 2014/08/01
Canvasä¸Šã®ç”»åƒã‚’ã†ã¾ã„ã“ã¨æ‰±ãˆã‚‹ã‚ˆã†ã«ã—ã¦ãã‚Œã‚‹ãƒ©ã‚¤ãƒ–ãƒ©ãƒª

canvas

html5

javascript

framework

animation
ãƒªãƒ³ã‚¯
Pixel Perfect: Fingerprinting Canvas in HTML5
ko-ya-ma 2014/07/23
canvas

javascript

fingerprint

privacy
ãƒªãƒ³ã‚¯
ãƒ–ãƒãƒƒã‚¯ã§ããªã„ã‚ªãƒ³ãƒ©ã‚¤ãƒ³ãƒˆãƒ©ãƒƒã‚ãƒ³ã‚°ãƒ„ãƒ¼ãƒ«ãŒäººæ°—ã‚µã‚¤ãƒˆã«æµ¸é€
ãƒ—ãƒªãƒ³ã‚¹ãƒˆãƒ³å¤§å¦ã¨ãƒ«ãƒ¼ãƒ´ã‚§ãƒ³ãƒ»ã‚«ãƒˆãƒªãƒƒã‚¯å¤§å¦ã®ç ”ç©¶è€…ãŒã¾ã¨ã‚ãŸè«–æ–‡ã€ŒThe Web never forgets: Persistent tracking mechanisms in the wildã€ã«ã‚ˆã‚‹ã¨ã€Canvas FingerprintingæŠ€è¡“ã‚’ä½¿ã£ãŸã‚ªãƒ³ãƒ©ã‚¤ãƒ³ãƒˆãƒ©ãƒƒã‚ãƒ³ã‚°ãƒ„ãƒ¼ãƒ«ãŒAlexaãƒˆãƒƒãƒ—ã‚µã‚¤ãƒˆã«æµ¸é€ã—ã¦ã„ã‚‹ã€‚åŒãƒ„ãƒ¼ãƒ«ãŒä½¿ã‚ã‚Œã¦ã„ã‚‹ã¨ã€ãƒ–ãƒ©ã‚¦ã‚¶ãƒ¦ãƒ¼ã‚¶ãƒ¼ãŒè¿½è·¡ã‚’ãƒ–ãƒãƒƒã‚¯ã™ã‚‹ã®ãŒéžå¸¸ã«é›£ã—ããªã‚‹ã€‚ ãƒ¢ãƒ€ãƒ³ãƒ–ãƒ©ã‚¦ã‚¶ãŒã‚µãƒãƒ¼ãƒˆã™ã‚‹Canvas APIã‚’é€šã˜ã¦ãƒ¬ãƒ³ãƒ€ãƒªãƒ³ã‚°ã•ã‚ŒãŸã‚¤ãƒ¡ãƒ¼ã‚¸ã«ã¯ç«¯æœ«ã”ã¨ã®ã‚ãšã‹ãªé•ã„ãŒç”Ÿã˜ã‚‹ã€‚ã“ã‚Œã‚’ãƒ‡ãƒã‚¤ã‚¹ã®æŒ‡ç´‹ã®ã‚ˆã†ã«ç”¨ã„ã‚‹ãƒ†ã‚¯ãƒ‹ãƒƒã‚¯ã‚’2012å¹´ã«ã‚«ãƒªãƒ•ã‚©ãƒ«ãƒ‹ã‚¢å¤§å¦ã‚µãƒ³ãƒ‡ã‚£ã‚¨ã‚´æ ¡ã®ç ”ç©¶è€…ãŒç™ºè¡¨ã—ã€Canvas Fingerprinting(Canvasã®æŒ‡ç´‹æŽ¡å–)ã¨å‘¼ã‚“ã ã€‚åŒæŠ€è¡“ã‚’æŽ¡ç”¨ã—ãŸã‚ªãƒ³ãƒ©ã‚¤ãƒ³ãƒˆãƒ©ãƒƒã‚ãƒ³ã‚°ãƒ„ãƒ¼ãƒ«ã¯ã€ãƒ¦ãƒ¼ã‚¶ãƒ¼ã«ã¯è¦‹ãˆãªã„ãƒ†ã‚ã‚¹ãƒˆã‚’
ko-ya-ma 2014/07/22
Canvasã‚’ä½¿ã£ãŸæ–¹æ³•ã¯ã©ã“ã ã£ãŸãŒå®Ÿéš›ä½¿ã£ã¦ã„ãªãã€‚é˜²ãŽã«ãã„ãƒ•ã‚£ãƒ³ã‚¬ãƒ¼ãƒ—ãƒªãƒ³ãƒˆæŠ€è¡“ã¯ä»–ã«ã‚‚ã„ã‚ã„ã‚ã‚ã£ã¦çµ„ã¿åˆã‚ã›ã¦ä½¿ã‚ã‚Œã‚‹ã€‚ã‚‚ã†é¢å€’ã ã‹ã‚‰æ°—ã«ã—ãªã„ã“ã¨ã«ã—ã¦ã‚‹ã€‚

canvas

JavaScript

privacy
ãƒªãƒ³ã‚¯
ãƒãƒ¼ã‚½ã‚¯ãƒãƒ£ãƒ¼ãƒˆã‚„æ£’ã€æŠ˜ã‚Œç·šã‚°ãƒ©ãƒ•ã‚’ä½œã‚‹HTML5ã‚°ãƒ©ãƒ•ãƒ©ã‚¤ãƒ–ãƒ©ãƒªÂ·Rocketchart MOONGIFT
Rocketchartã¯HTML5ã§ä½œã‚‰ã‚ŒãŸãƒ€ã‚¤ãƒŠãƒŸãƒƒã‚¯ãªã‚°ãƒ©ãƒ•ãƒ©ã‚¤ãƒ–ãƒ©ãƒªã§ã™ã€‚ HTML5ã§ã§ãã‚‹ã“ã¨ãŒã©ã‚“ã©ã‚“åºƒãŒã£ã¦ã„ã¾ã™ã€‚ä»Šå›žç´¹ä»‹ã™ã‚‹Rocketchartsã‚‚HTML5ã‚’é§†ä½¿ã—ã¦ã„ã¾ã™ã€‚ãã—ã¦ã™ã”ã„ã‚°ãƒ©ãƒ•ã‚’ä½œã£ã¦ãã¾ã—ãŸã€‚ ãƒãƒ¼ã‚½ã‚¯ãƒãƒ£ãƒ¼ãƒˆã§ã™ã€‚HTML5ã§ä½œã‚‰ã‚Œã¦ã„ã¾ã™ã€‚ æŠ˜ã‚Œç·šã‚°ãƒ©ãƒ•ã‚’è¿½åŠ ã—ã¾ã—ãŸã€‚ ã•ã‚‰ã«æ£’ã‚°ãƒ©ãƒ•ã¨æŠ˜ã‚Œç·šã‚°ãƒ©ãƒ•ã®ãƒŸãƒƒã‚¯ã‚¹ã§ã™ã€‚ ã‚¯ãƒªãƒƒã‚¯ã™ã‚‹ã¨ãã®ç®‡æ‰€ã®æ•°å€¤ãŒåˆ†ã‹ã‚Šã¾ã™ã€‚ è¡¨ç¤ºç¯„å›²ã‚’ãƒžã‚¦ã‚¹ã§é¸æŠžã—ã¦çµžã‚Šè¾¼ã‚€ã“ã¨ã‚‚ã§ãã¾ã™ã€‚ é€†ã«åºƒã’ãŸå ´åˆã§ã™ã€‚ Rocketchartã¯JSONãƒ‡ãƒ¼ã‚¿ã‚’ä½¿ã£ã¦Canvasã‚¿ã‚°ã«ã‚°ãƒ©ãƒ•ã‚’æã„ã¦ã„ã¾ã™ã€‚ãã®ãŸã‚ç›´æŽ¥æ›¸ãå‡ºã™ã®ã¯ã‚‚ã¡ã‚ã‚“ã€Ajaxãªã©ã§JSONãƒ‡ãƒ¼ã‚¿ã‚’æ¸¡ã—ã¦ãƒ¬ãƒ³ãƒ€ãƒªãƒ³ã‚°ã™ã‚‹ã“ã¨ã‚‚ã§ããã†ã§ã™ã€‚ Rocketchartã¯JavaScriptè£½ã€GPL v3ã®ã‚ªãƒ¼ãƒ—ãƒ³ã‚½ãƒ¼ã‚¹ãƒ»ã‚½ãƒ•ãƒˆã‚¦ã‚§ã‚¢ã«ãªã‚Šã¾ã™ã€‚ MOONGIFTã¯ã“ã†
ko-ya-ma 2013/11/14
ãªã‹ãªã‹é«˜æ©Ÿèƒ½ãªã‚°ãƒ©ãƒ•ã€‚é•ã†ã‚¿ã‚¤ãƒ—ã®ãƒŸãƒƒã‚¯ã‚¹ãŒã§ãã‚‹ã¨ã“ã‚ã‚‚è‰¯ã„

GPL

chart

javascript

dev

library

json

canvas
ãƒªãƒ³ã‚¯
Chart.js
New in 4.0 Colors plugin Default palette of Chart.js brand colors is available as a built-in time-saving zero-configuration plugin.
ko-ya-ma 2013/11/14
ã„ã‚ã„ã‚ãªã‚¿ã‚¤ãƒ—ã®ã‚°ãƒ©ãƒ•ã‚’ç¾Žã—ãã‚«ãƒƒã‚³ã‚ˆãè¡¨ç¤ºã§ãã‚‹ã€‚MITãƒ©ã‚¤ã‚»ãƒ³ã‚¹

chart

javascript

UI

library

dev

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ã‚¢ã‚¯ã‚»ãƒ©ãƒ¬ãƒ¼ã‚·ãƒ§ãƒ³
ko-ya-ma 2013/03/04
android

dev

canvas

tips
ãƒªãƒ³ã‚¯
CreateJS | A suite of JavaScript libraries and tools designed for working with HTML5
A suite of modular libraries and tools which work together or independently to enable rich interactive content on open web techno logies via HTML5.
ko-ya-ma 2012/04/18
framework

html5

animation

sound

download
ãƒªãƒ³ã‚¯
ã¯ã¦ãªã‚°ãƒ«ãƒ¼ãƒ—ã®çµ‚äº†æ—¥ã‚’2020å¹´1æœˆ31æ—¥(é‡‘)ã«æ±ºå®šã—ã¾ã—ãŸ - ã¯ã¦ãªã®å‘ŠçŸ¥
ã¯ã¦ãªã‚°ãƒ«ãƒ¼ãƒ—ã®çµ‚äº†æ—¥ã‚’2020å¹´1æœˆ31æ—¥(é‡‘)ã«æ±ºå®šã—ã¾ã—ãŸ ä»¥ä¸‹ã®ã‚¨ãƒ³ãƒˆãƒªã®é€šã‚Šã€ä»Šå¹´æœ«ã‚’ç›®å‡¦ã«ã¯ã¦ãªã‚°ãƒ«ãƒ¼ãƒ—ã‚’çµ‚äº†äºˆå®šã§ã‚ã‚‹æ—¨ã‚’ãŠçŸ¥ã‚‰ã›ã—ã¦ãŠã‚Šã¾ã—ãŸã€‚ 2019å¹´æœ«ã‚’ç›®å‡¦ã«ã€ã¯ã¦ãªã‚°ãƒ«ãƒ¼ãƒ—ã®æä¾›ã‚’çµ‚äº†ã™ã‚‹äºˆå®šã§ã™ - ã¯ã¦ãªã‚°ãƒ«ãƒ¼ãƒ—æ—¥è¨˜ ã“ã®ãŸã³ã€æ£å¼ã«çµ‚äº†æ—¥ã‚’æ±ºå®šã„ãŸã—ã¾ã—ãŸã®ã§ã€ä»¥ä¸‹ã®é€šã‚Šã”ç¢ºèªãã ã•ã„ã€‚ çµ‚äº†æ—¥: 2020å¹´1æœˆ31æ—¥(é‡‘) ã‚¨ã‚¯ã‚¹ãƒãƒ¼ãƒˆå¸Œæœ›ç”³è«‹æœŸé™:2020å¹´1æœˆ31æ—¥(é‡‘) çµ‚äº†æ—¥ä»¥é™ã¯ã€ã¯ã¦ãªã‚°ãƒ«ãƒ¼ãƒ—ã®é–²è¦§ãŠã‚ˆã³æŠ•ç¨¿ã¯è¡Œãˆã¾ã›ã‚“ã€‚æ—¥è¨˜ã®ã‚¨ã‚¯ã‚¹ãƒãƒ¼ãƒˆãŒå¿…è¦ãªæ–¹ã¯ä»¥ä¸‹ã®è¨˜äº‹ã«ã—ãŸãŒã£ã¦æ‰‹ç¶šãã‚’ã—ã¦ãã ã•ã„ã€‚ ã¯ã¦ãªã‚°ãƒ«ãƒ¼ãƒ—ã«æŠ•ç¨¿ã•ã‚ŒãŸæ—¥è¨˜ãƒ‡ãƒ¼ã‚¿ã®ã‚¨ã‚¯ã‚¹ãƒãƒ¼ãƒˆã«ã¤ã„ã¦ - ã¯ã¦ãªã‚°ãƒ«ãƒ¼ãƒ—æ—¥è¨˜ ã”åˆ©ç”¨ã®ã¿ãªã•ã¾ã«ã¯ã”è¿·æƒ‘ã‚’ãŠã‹ã‘ã„ãŸã—ã¾ã™ãŒã€ã©ã†ãžã‚ˆã‚ã—ããŠé¡˜ã„ã„ãŸã—ã¾ã™ã€‚ 2020-06-25 è¿½è¨˜ ã¯ã¦ãªã‚°ãƒ«ãƒ¼ãƒ—æ—¥è¨˜ã®ã‚¨ã‚¯ã‚¹ãƒãƒ¼ãƒˆãƒ‡ãƒ¼ã‚¿ã¯2020å¹´2æœˆ28
ko-ya-ma 2012/03/21
ã€Œä»¥ä¸‹ã¯å¤ã„ä»•æ§˜ã§ã™ã€‚ç¾åœ¨ã¯ createImageData ãƒ¡ã‚½ãƒƒãƒ‰ã§ ImageData ã‚ªãƒ–ã‚¸ã‚§ã‚¯ãƒˆã‚’ä½œã‚‰ãªã‘ã‚Œã°ã„ã‘ã¾ã›ã‚“ã€

canvas

html5

color

code

javascript

sample
ãƒªãƒ³ã‚¯
Event Subscription - JavaScriptç”¨Facebook SDK - ãƒ‰ã‚ãƒ¥ãƒ¡ãƒ³ãƒ†ãƒ¼ã‚·ãƒ§ãƒ³ - Meta for Developers
JavaScript SDK: .Event.subscribe() This method allows you to subscribe to a range of events, and define callback functions for when they fire. FB.Event.subscribe(event, callback)
ko-ya-ma 2012/01/24
likeãƒœã‚¿ãƒ³ã®ã‚¯ãƒªãƒƒã‚¯ç‰ã®ã‚¤ãƒ™ãƒ³ãƒˆã‚’ãƒ•ãƒƒã‚¯ã™ã‚‹æ–¹æ³•ã€‚JavaSDKã§ã„ã„ãï¼ãƒœã‚¿ãƒ³ã‚’é…ç½®ã™ã‚‹å¿…è¦ã‚ã‚Šã€‚

event

canvas

facebook

javascript

manual
ãƒªãƒ³ã‚¯
1 2 æ¬¡ã®ãƒšãƒ¼ã‚¸