Forked from: Event's Button diff(242) Main Button takoyaki1000.. Follow 2010-09-27 23:08:19 License: MIT License Fork0 Fav2 View903 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 224 lines HTML 8 lines CSS 18 lines Main Button jQuery v1.4.2 // forked from Event's "Button" http://jsdo.it/Event/jam_session3 domo_onload=window.onload; window.onload=draw; var a = 1,b = 2,c = 3,d = 4,e = 5; this.color = [ 90+Math.floor(Math.random()*22), 120+Math.floor(Math.random()*115), 220+Math.floor(Math.random()*32), 220+Math.floor(Math.random()*142), 220+Math.floor(Math.random()*52) ]; function draw() { if (domo_onload) domo_onload(); /* <canvas>要素ノードの取得 */ var canvas = document.getElementById('c1'); if (!canvas) return(false); /* ノードが取れたか判定 */ if (!canvas.getContext) return(false); /* 描画用のオブジェクトを取得 */ var ctx=canvas.getContext('2d'); /* 初期化 */ ctx.fillStyle = '#000'; ctx.fillRect(0, 0, 300, 300); ctx.strokeStyle = '#fff'; /*外円影１*/ ctx.beginPath(); ctx.shadowBlur = 15; ctx.shadowColor = "#aaa"; ctx.shadowOffsetX = 0; ctx.shadowOffsetY = -1; ctx.arc(150, 150, 140, 0 , Math.PI*2 , false); ctx.fill(); /*外円影２*/ ctx.beginPath(); ctx.shadowBlur = 6; ctx.shadowColor = "#777"; ctx.shadowOffsetX = 0; ctx.shadowOffsetY = 0; ctx.arc(150, 150, 140, 80 * Math.PI /180, 50 * Math.PI /180 , true); ctx.fill(); /*外円影３*/ ctx.beginPath(); ctx.shadowBlur = 3; ctx.shadowColor = "#ddd"; ctx.shadowOffsetX = 0; ctx.shadowOffsetY = -1; ctx.arc(150, 150, 140, 255 * Math.PI /180, 215 * Math.PI /180 , true); ctx.fill(); /*外円影5*/ ctx.beginPath(); ctx.shadowBlur = 8; ctx.shadowColor = "#777"; ctx.shadowOffsetX = 0; ctx.shadowOffsetY = -1; ctx.fillStyle = "#000"; ctx.arc(150,150,140,270*Math.PI/180,205*Math.PI/180, true); ctx.fill(); /*外円*/ ctx.beginPath(); var grad1 = ctx.createLinearGradient(0,0, 300,300); grad1.addColorStop(0,'#888'); grad1.addColorStop(0.5,'#1d1d1d'); grad1.addColorStop(1,'#555'); ctx.fillStyle = grad1; ctx.arc(150, 150, 139, 0 , Math.PI*2 , true); ctx.fill(); /*内円*/ ctx.beginPath(); var grad2 = ctx.createLinearGradient(0,0, 300,300); grad2.addColorStop(0,'#aaa'); grad2.addColorStop(0.5,'#0d0d0d'); grad2.addColorStop(1,'#777'); ctx.fillStyle = grad2; ctx.arc(150, 150, 100, 0 , Math.PI*2 , true); ctx.fill(); /*光沢*/ ctx.globalAlpha = 0.0; ctx.beginPath(); ctx.shadowBlur = 20; ctx.shadowColor = "#b1b1b1"; ctx.shadowOffsetX = 0; ctx.shadowOffsetY = 0; ctx.fillStyle = "#fff"; ctx.arc(80, 75, 10, 0, Math.PI*2 , true); ctx.fill(); ctx.beginPath(); ctx.shadowBlur = 20; ctx.shadowColor = "#b1b1b1"; ctx.shadowOffsetX = 0; ctx.shadowOffsetY = 0; ctx.fillStyle = "#fff"; ctx.arc(205, 235, 7, 0, Math.PI*2 , true); ctx.fill(); ctx.globalAlpha = 1.0; /*縦棒*/ ctx.beginPath(); var grad3 = ctx.createLinearGradient(150,50,150,250); grad3.addColorStop(0,'#03ffff'); grad3.addColorStop(0.5,'#0fffff'); grad3.addColorStop(1,'#0099cc'); var grad4 = ctx.createLinearGradient(150,50,150,250); grad4.addColorStop(0,'#03ffff'); grad4.addColorStop(0.5,'#ffffff'); grad4.addColorStop(1,'#ffffff'); var grad5 = ctx.createLinearGradient(150,50,150,250); grad5.addColorStop(0,'rgb('+ Math.floor(this.color[a])+','+ Math.floor(this.color[b])+','+ Math.floor(this.color[c])+')' ); grad5.addColorStop(0.5,'rgb('+ Math.floor(this.color[a])+','+ Math.floor(this.color[c])+','+ Math.floor(this.color[d])+')' ); grad5.addColorStop(1,'rgb('+ Math.floor(this.color[a])+','+ Math.floor(this.color[b])+','+ Math.floor(this.color[c])+')' ); ctx.fillStyle = grad5; ctx.lineWidth = 1.5; ctx.shadowColor = "#013955"; ctx.shadowBlur = 3; ctx.shadowOffsetX = 0; ctx.shadowOffsetY = -2; ctx.moveTo(143, 66); ctx.bezierCurveTo(143, 56, 157, 56, 157, 66); ctx.lineTo(157, 153); ctx.bezierCurveTo(157, 163, 143, 163, 143, 153); ctx.closePath(); ctx.fill(); ctx.beginPath(); ctx.lineWidth = 0.2; ctx.strokeStyle = "#000"; ctx.moveTo(143, 66); ctx.bezierCurveTo(143, 56, 157, 56, 157, 66); ctx.lineTo(157, 153); ctx.bezierCurveTo(157, 163, 143, 163, 143, 153); ctx.closePath(); ctx.stroke(); /*丸い部分*/ ctx.beginPath(); ctx.fillStyle = grad5; ctx.lineWidth = 1.5; ctx.moveTo(108, 88); ctx.bezierCurveTo(120, 80, 128, 92, 116, 100); ctx.lineTo(116, 100); ctx.bezierCurveTo(106, 110, 90, 120, 90, 150); ctx.lineTo(90, 150); ctx.bezierCurveTo(90, 230, 210, 230, 210, 150); ctx.lineTo(210, 150); ctx.bezierCurveTo(210, 120, 194, 110, 184, 100); ctx.lineTo(184, 100); ctx.bezierCurveTo(172, 92, 180, 80, 192, 88); ctx.lineTo(192, 88); ctx.bezierCurveTo(202, 92, 225, 116, 225, 150); ctx.lineTo(225, 150); ctx.bezierCurveTo(225, 249, 75, 249, 75, 150); ctx.lineTo(75, 150); ctx.bezierCurveTo(75, 116, 98, 92, 108, 88); ctx.closePath(); ctx.fill(); ctx.beginPath(); ctx.lineWidth = 0.2; ctx.strokeStyle = "#000"; ctx.moveTo(108, 88); ctx.bezierCurveTo(120, 80, 128, 92, 116, 100); ctx.lineTo(116, 100); ctx.bezierCurveTo(106, 110, 90, 120, 90, 150); ctx.lineTo(90, 150); ctx.bezierCurveTo(90, 230, 210, 230, 210, 150); ctx.lineTo(210, 150); ctx.bezierCurveTo(210, 120, 194, 110, 184, 100); ctx.lineTo(184, 100); ctx.bezierCurveTo(172, 92, 180, 80, 192, 88); ctx.lineTo(192, 88); ctx.bezierCurveTo(202, 92, 225, 116, 225, 150); ctx.lineTo(225, 150); ctx.bezierCurveTo(225, 249, 75, 249, 75, 150); ctx.lineTo(75, 150); ctx.bezierCurveTo(75, 116, 98, 92, 108, 88); ctx.closePath(); ctx.stroke(); /*外円と内円の溝*/ ctx.beginPath(); ctx.lineWidth = 2.5; ctx.shadowBlur = 1; ctx.shadowColor = "#888"; ctx.shadowOffsetX = 0; ctx.shadowOffsetY = 0; ctx.strokeStyle = "#000"; ctx.arc(150, 150, 103, 0 , Math.PI*2 , true); ctx.stroke(); } <div> <canvas id="c1" width="300" height="300"></canvas> <div id="test2"> <a href="javascript:void(0);" class="button"></a> </div> </div> Main Button body { background-color: #000; } div { width: 300px; height: 300px; margin: 40px auto; } a { position: relative; top: -168px; left: 55px; padding: 85px 96px; } // forked from Event's "Button" http://jsdo.it/Event/jam_session3 domo_onload=window.onload; window.onload=draw; var a = 1,b = 2,c = 3,d = 4,e = 5; this.color = [ 90+Math.floor(Math.random()*22), 120+Math.floor(Math.random()*115), 220+Math.floor(Math.random()*32), 220+Math.floor(Math.random()*142), 220+Math.floor(Math.random()*52) ]; function draw() { if (domo_onload) domo_onload(); /* <canvas>要素ノードの取得 */ var canvas = document.getElementById('c1'); if (!canvas) return(false); /* ノードが取れたか判定 */ if (!canvas.getContext) return(false); /* 描画用のオブジェクトを取得 */ var ctx=canvas.getContext('2d'); /* 初期化 */ ctx.fillStyle = '#000'; ctx.fillRect(0, 0, 300, 300); ctx.strokeStyle = '#fff'; /*外円影１*/ ctx.beginPath(); ctx.shadowBlur = 15; ctx.shadowColor = "#aaa"; ctx.shadowOffsetX = 0; ctx.shadowOffsetY = -1; ctx.arc(150, 150, 140, 0 , Math.PI*2 , false); ctx.fill(); /*外円影２*/ ctx.beginPath(); ctx.shadowBlur = 6; ctx.shadowColor = "#777"; ctx.shadowOffsetX = 0; ctx.shadowOffsetY = 0; ctx.arc(150, 150, 140, 80 * Math.PI /180, 50 * Math.PI /180 , true); ctx.fill(); /*外円影３*/ ctx.beginPath(); ctx.shadowBlur = 3; ctx.shadowColor = "#ddd"; ctx.shadowOffsetX = 0; ctx.shadowOffsetY = -1; ctx.arc(150, 150, 140, 255 * Math.PI /180, 215 * Math.PI /180 , true); ctx.fill(); /*外円影5*/ ctx.beginPath(); ctx.shadowBlur = 8; ctx.shadowColor = "#777"; ctx.shadowOffsetX = 0; ctx.shadowOffsetY = -1; ctx.fillStyle = "#000"; ctx.arc(150,150,140,270*Math.PI/180,205*Math.PI/180, true); ctx.fill(); /*外円*/ ctx.beginPath(); var grad1 = ctx.createLinearGradient(0,0, 300,300); grad1.addColorStop(0,'#888'); grad1.addColorStop(0.5,'#1d1d1d'); grad1.addColorStop(1,'#555'); ctx.fillStyle = grad1; ctx.arc(150, 150, 139, 0 , Math.PI*2 , true); ctx.fill(); /*内円*/ ctx.beginPath(); var grad2 = ctx.createLinearGradient(0,0, 300,300); grad2.addColorStop(0,'#aaa'); grad2.addColorStop(0.5,'#0d0d0d'); grad2.addColorStop(1,'#777'); ctx.fillStyle = grad2; ctx.arc(150, 150, 100, 0 , Math.PI*2 , true); ctx.fill(); /*光沢*/ ctx.globalAlpha = 0.0; ctx.beginPath(); ctx.shadowBlur = 20; ctx.shadowColor = "#b1b1b1"; ctx.shadowOffsetX = 0; ctx.shadowOffsetY = 0; ctx.fillStyle = "#fff"; ctx.arc(80, 75, 10, 0, Math.PI*2 , true); ctx.fill(); ctx.beginPath(); ctx.shadowBlur = 20; ctx.shadowColor = "#b1b1b1"; ctx.shadowOffsetX = 0; ctx.shadowOffsetY = 0; ctx.fillStyle = "#fff"; ctx.arc(205, 235, 7, 0, Math.PI*2 , true); ctx.fill(); ctx.globalAlpha = 1.0; /*縦棒*/ ctx.beginPath(); var grad3 = ctx.createLinearGradient(150,50,150,250); grad3.addColorStop(0,'#03ffff'); grad3.addColorStop(0.5,'#0fffff'); grad3.addColorStop(1,'#0099cc'); var grad4 = ctx.createLinearGradient(150,50,150,250); grad4.addColorStop(0,'#03ffff'); grad4.addColorStop(0.5,'#ffffff'); grad4.addColorStop(1,'#ffffff'); var grad5 = ctx.createLinearGradient(150,50,150,250); grad5.addColorStop(0,'rgb('+ Math.floor(this.color[a])+','+ Math.floor(this.color[b])+','+ Math.floor(this.color[c])+')' ); grad5.addColorStop(0.5,'rgb('+ Math.floor(this.color[a])+','+ Math.floor(this.color[c])+','+ Math.floor(this.color[d])+')' ); grad5.addColorStop(1,'rgb('+ Math.floor(this.color[a])+','+ Math.floor(this.color[b])+','+ Math.floor(this.color[c])+')' ); ctx.fillStyle = grad5; ctx.lineWidth = 1.5; ctx.shadowColor = "#013955"; ctx.shadowBlur = 3; ctx.shadowOffsetX = 0; ctx.shadowOffsetY = -2; ctx.moveTo(143, 66); ctx.bezierCurveTo(143, 56, 157, 56, 157, 66); ctx.lineTo(157, 153); ctx.bezierCurveTo(157, 163, 143, 163, 143, 153); ctx.closePath(); ctx.fill(); ctx.beginPath(); ctx.lineWidth = 0.2; ctx.strokeStyle = "#000"; ctx.moveTo(143, 66); ctx.bezierCurveTo(143, 56, 157, 56, 157, 66); ctx.lineTo(157, 153); ctx.bezierCurveTo(157, 163, 143, 163, 143, 153); ctx.closePath(); ctx.stroke(); /*丸い部分*/ ctx.beginPath(); ctx.fillStyle = grad5; ctx.lineWidth = 1.5; ctx.moveTo(108, 88); ctx.bezierCurveTo(120, 80, 128, 92, 116, 100); ctx.lineTo(116, 100); ctx.bezierCurveTo(106, 110, 90, 120, 90, 150); ctx.lineTo(90, 150); ctx.bezierCurveTo(90, 230, 210, 230, 210, 150); ctx.lineTo(210, 150); ctx.bezierCurveTo(210, 120, 194, 110, 184, 100); ctx.lineTo(184, 100); ctx.bezierCurveTo(172, 92, 180, 80, 192, 88); ctx.lineTo(192, 88); ctx.bezierCurveTo(202, 92, 225, 116, 225, 150); ctx.lineTo(225, 150); ctx.bezierCurveTo(225, 249, 75, 249, 75, 150); ctx.lineTo(75, 150); ctx.bezierCurveTo(75, 116, 98, 92, 108, 88); ctx.closePath(); ctx.fill(); ctx.beginPath(); ctx.lineWidth = 0.2; ctx.strokeStyle = "#000"; ctx.moveTo(108, 88); ctx.bezierCurveTo(120, 80, 128, 92, 116, 100); ctx.lineTo(116, 100); ctx.bezierCurveTo(106, 110, 90, 120, 90, 150); ctx.lineTo(90, 150); ctx.bezierCurveTo(90, 230, 210, 230, 210, 150); ctx.lineTo(210, 150); ctx.bezierCurveTo(210, 120, 194, 110, 184, 100); ctx.lineTo(184, 100); ctx.bezierCurveTo(172, 92, 180, 80, 192, 88); ctx.lineTo(192, 88); ctx.bezierCurveTo(202, 92, 225, 116, 225, 150); ctx.lineTo(225, 150); ctx.bezierCurveTo(225, 249, 75, 249, 75, 150); ctx.lineTo(75, 150); ctx.bezierCurveTo(75, 116, 98, 92, 108, 88); ctx.closePath(); ctx.stroke(); /*外円と内円の溝*/ ctx.beginPath(); ctx.lineWidth = 2.5; ctx.shadowBlur = 1; ctx.shadowColor = "#888"; ctx.shadowOffsetX = 0; ctx.shadowOffsetY = 0; ctx.strokeStyle = "#000"; ctx.arc(150, 150, 103, 0 , Math.PI*2 , true); ctx.stroke(); } <div> <canvas id="c1" width="300" height="300"></canvas> <div id="test2"> <a href="javascript:void(0);" class="button"></a> </div> </div> body { background-color: #000; } div { width: 300px; height: 300px; margin: 40px auto; } a { position: relative; top: -168px; left: 55px; padding: 85px 96px; } use an iframe compat browser, deer Play on jsdo.it games Share Embed QR Tag Download Complete! Description どんなゲームですか？ Control Device スマートフォンコントローラー jsdo.it WebSocket Controller» マウス キーボード タッチデバイス Fullscreen 有効 無効 jsdo.it games から削除する Submit Tweet style Design view Code view code <script type="text/javascript" src="http://jsdo.it/blogparts/zFJ8/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/takoyaki10000/zFJ8" title="Main Button">Main Button - jsdo.it - share JavaScript, HTML5 and CSS</a></p> Button Tweet twitter Tags Button Favorite by Docfive: Button termat: かっこいいです。
