getCSSCanvasContext edo_m18 Follow 2012-01-25 18:03:26 License: MIT License Fork0 Fav4 View456 getCSSCanvasContextっていうの、はじめて知った・・。あと-webkit-canvasも。 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 25 lines HTML 4 lines CSS 12 lines getCSSCanvasContextっていうの、はじめて知った・・。あと-webkit-canvasも。 getCSSCanvasContext function drawArrows() { var ctx = document.getCSSCanvasContext("2d", "arrowRight", 10, 11); ctx.fillStyle = "rgb(90,90,90)"; ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(0, 8); ctx.lineTo(7, 4); ctx.lineTo(0, 0); ctx.fill(); ctx.closePath(); var ctx = document.getCSSCanvasContext("2d", "arrowDown", 100, 100); ctx.fillStyle = "rgb(90,90,90)"; ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(80, 0); ctx.lineTo(40, 70); ctx.lineTo(0, 0); ctx.fill(); ctx.closePath(); } drawArrows(); <div class="collapse-button">テキスト</div> <div class="expand-button"></div> <p>↑▼の部分はcanvasで描いたものを背景に指定しています</p> getCSSCanvasContext .collapse-button { background-image: -webkit-canvas(arrowDown); background-color: #eee; width: 100px; height: 100px; } .expand-button { background-image: -webkit-canvas(arrowRight); width: 10px; height: 11px; } getCSSCanvasContextっていうの、はじめて知った・・。あと-webkit-canvasも。 function drawArrows() { var ctx = document.getCSSCanvasContext("2d", "arrowRight", 10, 11); ctx.fillStyle = "rgb(90,90,90)"; ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(0, 8); ctx.lineTo(7, 4); ctx.lineTo(0, 0); ctx.fill(); ctx.closePath(); var ctx = document.getCSSCanvasContext("2d", "arrowDown", 100, 100); ctx.fillStyle = "rgb(90,90,90)"; ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(80, 0); ctx.lineTo(40, 70); ctx.lineTo(0, 0); ctx.fill(); ctx.closePath(); } drawArrows(); <div class="collapse-button">テキスト</div> <div class="expand-button"></div> <p>↑▼の部分はcanvasで描いたものを背景に指定しています</p> .collapse-button { background-image: -webkit-canvas(arrowDown); background-color: #eee; width: 100px; height: 100px; } .expand-button { background-image: -webkit-canvas(arrowRight); width: 10px; height: 11px; } use an iframe compat browser, deer Tweet QR code Embed Design view Code view <script type="text/javascript" src="http://jsdo.it/blogparts/q7Gg/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/edo_m18/q7Gg" title="getCSSCanvasContext">getCSSCanvasContext - jsdo.it - share JavaScript, HTML5 and CSS</a></p> zip tags canvas getCSSCanvasContext webkit Tweet twitter Tags canvas getCSSCanvasContext webkit Favorite by ksk1015 dentaq fingaholic xl1 Forked sort new page view favorite forked forked: getCSSCanvasContext adakimo 00 18views 26/4/12 canvas getCSSCanvasContext webkit
