Fw to Canvas test1 yoropan1 Follow 2011-11-10 23:54:05 License: MIT License Fork0 Fav0 View690 FireworksからCanvasに描画するためのコマンドをβ公開。 | Yoropan blog http://yoropan.com/blog/archives/806 のテスト Play Stop Reload Fullscreen Smart Phone Readme JavaScript 148 lines HTML 1 lines CSS 1 lines FireworksからCanvasに描画するためのコマンドをβ公開。 | Yoropan blog http://yoropan.com/blog/archives/806 のテスト Fw to Canvas test1 var cv = document.getElementById("cv"); if (cv.getContext) { var ctx = cv.getContext('2d'); draw(ctx); } function draw(ctx) { // ctx.globalAlpha = 1; ctx.beginPath(); ctx.moveTo(31.8,20); ctx.lineTo(209.2,20); ctx.bezierCurveTo(214.6,20,219,24.4,219,29.8); ctx.lineTo(219,99.2); ctx.bezierCurveTo(219,104.6,214.6,109,209.2,109); ctx.lineTo(141,109); ctx.lineTo(124,135); ctx.lineTo(108,109); ctx.lineTo(31.8,109); ctx.bezierCurveTo(26.4,109,22,104.6,22,99.2); ctx.lineTo(22,29.8); ctx.bezierCurveTo(22,24.4,26.4,20,31.8,20); ctx.lineJoin = "round"; ctx.closePath(); ctx.fillStyle = "rgb(255,255,204)"; ctx.fill(); ctx.lineWidth = 7; ctx.strokeStyle = "rgba(255,204,51,1)"; ctx.stroke(); // ctx.globalAlpha = 1; ctx.beginPath(); ctx.moveTo(189,132); ctx.lineTo(262,132); ctx.bezierCurveTo(270.3,132,277,138.7,277,147); ctx.lineTo(277,147); ctx.bezierCurveTo(277,155.3,270.3,162,262,162); ctx.lineTo(189,162); ctx.bezierCurveTo(180.7,162,174,155.3,174,147); ctx.lineTo(174,147); ctx.bezierCurveTo(174,138.7,180.7,132,189,132); ctx.lineJoin = "round"; ctx.closePath(); gradient = ctx.createLinearGradient(227,113, 227,154); gradient.addColorStop(0,'rgb(0, 153, 102)'); gradient.addColorStop(0.5,'rgb(51, 204, 102)'); gradient.addColorStop(1,'rgb(51, 153, 102)'); ctx.fillStyle = gradient; ctx.fill(); ctx.lineWidth = 1; ctx.strokeStyle = "rgba(153,153,153,1)"; ctx.stroke(); // ctx.globalAlpha = 1; ctx.beginPath(); ctx.moveTo(154,171.6); ctx.lineTo(77.4,171.6); ctx.lineTo(77.4,171); ctx.lineTo(57,190); ctx.lineTo(77.4,209); ctx.lineTo(77.4,208.4); ctx.lineTo(116.9,208.4); ctx.lineTo(116.9,208.4); ctx.lineTo(116.9,208.4); ctx.lineTo(154,208.4); ctx.lineTo(154,171.6); ctx.lineTo(154,171.6); ctx.lineJoin = "round"; ctx.closePath(); gradient = ctx.createLinearGradient(75,167.4, 75,241.1); gradient.addColorStop(0,'rgb(0, 204, 255)'); gradient.addColorStop(0.5,'rgb(0, 153, 255)'); ctx.fillStyle = gradient; ctx.fill(); ctx.lineWidth = 3; ctx.strokeStyle = "rgba(0,97,162,1)"; ctx.stroke(); //楕円形 ctx.globalAlpha = 1; ctx.beginPath(); ctx.moveTo(194,244); ctx.bezierCurveTo(194,231.3,204.3,221,217,221); ctx.bezierCurveTo(229.7,221,240,231.3,240,244); ctx.bezierCurveTo(240,256.7,229.7,267,217,267); ctx.bezierCurveTo(204.3,267,194,256.7,194,244); ctx.lineJoin = "round"; ctx.closePath(); gradient = ctx.createRadialGradient(217,233, 0, 217,233,52.3); gradient.addColorStop(0.1,'rgb(255, 255, 255)'); gradient.addColorStop(0.2,'rgb(255, 140, 164)'); gradient.addColorStop(0.5,'rgb(255, 51, 51)'); gradient.addColorStop(0.6,'rgb(255, 179, 179)'); ctx.fillStyle = gradient; ctx.fill(); ctx.lineWidth = 1; ctx.strokeStyle = "rgba(100,0,0,1)"; ctx.stroke(); // ctx.globalAlpha = 1; ctx.beginPath(); ctx.moveTo(204,241); ctx.lineTo(204,247); ctx.lineTo(214,247); ctx.lineTo(214,257); ctx.lineTo(220,257); ctx.lineTo(220,247); ctx.lineTo(230,247); ctx.lineTo(230,241); ctx.lineTo(220,241); ctx.lineTo(220,231); ctx.lineTo(214,231); ctx.lineTo(214,241); ctx.lineTo(204,241); ctx.lineJoin = "round"; ctx.closePath(); ctx.fillStyle = "rgb(255,255,255)"; ctx.fill(); ctx.lineWidth = 2; ctx.strokeStyle = "rgba(251,0,0,0.4)"; ctx.stroke(); // ctx.globalAlpha = 1; ctx.beginPath(); ctx.moveTo(64,241); ctx.bezierCurveTo(64,237.7,66.7,235,70,235); ctx.bezierCurveTo(73.3,235,76,237.7,76,241); ctx.bezierCurveTo(76,244.3,73.3,247,70,247); ctx.bezierCurveTo(66.7,247,64,244.3,64,241); ctx.moveTo(50,282); ctx.lineTo(50,282); ctx.lineTo(50,282); ctx.lineTo(89,282); ctx.lineTo(89,282); ctx.lineTo(89,234.8); ctx.lineTo(79.3,225); ctx.lineTo(59.8,225); ctx.lineTo(50,234.8); ctx.fillStyle = "rgb(160,174,197)"; ctx.fill(); } <canvas id="cv" height="300"></canvas> Fw to Canvas test1 body { background-color: #fff; font: 30px sans-serif; } FireworksからCanvasに描画するためのコマンドをβ公開。 | Yoropan blog http://yoropan.com/blog/archives/806 のテスト var cv = document.getElementById("cv"); if (cv.getContext) { var ctx = cv.getContext('2d'); draw(ctx); } function draw(ctx) { // ctx.globalAlpha = 1; ctx.beginPath(); ctx.moveTo(31.8,20); ctx.lineTo(209.2,20); ctx.bezierCurveTo(214.6,20,219,24.4,219,29.8); ctx.lineTo(219,99.2); ctx.bezierCurveTo(219,104.6,214.6,109,209.2,109); ctx.lineTo(141,109); ctx.lineTo(124,135); ctx.lineTo(108,109); ctx.lineTo(31.8,109); ctx.bezierCurveTo(26.4,109,22,104.6,22,99.2); ctx.lineTo(22,29.8); ctx.bezierCurveTo(22,24.4,26.4,20,31.8,20); ctx.lineJoin = "round"; ctx.closePath(); ctx.fillStyle = "rgb(255,255,204)"; ctx.fill(); ctx.lineWidth = 7; ctx.strokeStyle = "rgba(255,204,51,1)"; ctx.stroke(); // ctx.globalAlpha = 1; ctx.beginPath(); ctx.moveTo(189,132); ctx.lineTo(262,132); ctx.bezierCurveTo(270.3,132,277,138.7,277,147); ctx.lineTo(277,147); ctx.bezierCurveTo(277,155.3,270.3,162,262,162); ctx.lineTo(189,162); ctx.bezierCurveTo(180.7,162,174,155.3,174,147); ctx.lineTo(174,147); ctx.bezierCurveTo(174,138.7,180.7,132,189,132); ctx.lineJoin = "round"; ctx.closePath(); gradient = ctx.createLinearGradient(227,113, 227,154); gradient.addColorStop(0,'rgb(0, 153, 102)'); gradient.addColorStop(0.5,'rgb(51, 204, 102)'); gradient.addColorStop(1,'rgb(51, 153, 102)'); ctx.fillStyle = gradient; ctx.fill(); ctx.lineWidth = 1; ctx.strokeStyle = "rgba(153,153,153,1)"; ctx.stroke(); // ctx.globalAlpha = 1; ctx.beginPath(); ctx.moveTo(154,171.6); ctx.lineTo(77.4,171.6); ctx.lineTo(77.4,171); ctx.lineTo(57,190); ctx.lineTo(77.4,209); ctx.lineTo(77.4,208.4); ctx.lineTo(116.9,208.4); ctx.lineTo(116.9,208.4); ctx.lineTo(116.9,208.4); ctx.lineTo(154,208.4); ctx.lineTo(154,171.6); ctx.lineTo(154,171.6); ctx.lineJoin = "round"; ctx.closePath(); gradient = ctx.createLinearGradient(75,167.4, 75,241.1); gradient.addColorStop(0,'rgb(0, 204, 255)'); gradient.addColorStop(0.5,'rgb(0, 153, 255)'); ctx.fillStyle = gradient; ctx.fill(); ctx.lineWidth = 3; ctx.strokeStyle = "rgba(0,97,162,1)"; ctx.stroke(); //楕円形 ctx.globalAlpha = 1; ctx.beginPath(); ctx.moveTo(194,244); ctx.bezierCurveTo(194,231.3,204.3,221,217,221); ctx.bezierCurveTo(229.7,221,240,231.3,240,244); ctx.bezierCurveTo(240,256.7,229.7,267,217,267); ctx.bezierCurveTo(204.3,267,194,256.7,194,244); ctx.lineJoin = "round"; ctx.closePath(); gradient = ctx.createRadialGradient(217,233, 0, 217,233,52.3); gradient.addColorStop(0.1,'rgb(255, 255, 255)'); gradient.addColorStop(0.2,'rgb(255, 140, 164)'); gradient.addColorStop(0.5,'rgb(255, 51, 51)'); gradient.addColorStop(0.6,'rgb(255, 179, 179)'); ctx.fillStyle = gradient; ctx.fill(); ctx.lineWidth = 1; ctx.strokeStyle = "rgba(100,0,0,1)"; ctx.stroke(); // ctx.globalAlpha = 1; ctx.beginPath(); ctx.moveTo(204,241); ctx.lineTo(204,247); ctx.lineTo(214,247); ctx.lineTo(214,257); ctx.lineTo(220,257); ctx.lineTo(220,247); ctx.lineTo(230,247); ctx.lineTo(230,241); ctx.lineTo(220,241); ctx.lineTo(220,231); ctx.lineTo(214,231); ctx.lineTo(214,241); ctx.lineTo(204,241); ctx.lineJoin = "round"; ctx.closePath(); ctx.fillStyle = "rgb(255,255,255)"; ctx.fill(); ctx.lineWidth = 2; ctx.strokeStyle = "rgba(251,0,0,0.4)"; ctx.stroke(); // ctx.globalAlpha = 1; ctx.beginPath(); ctx.moveTo(64,241); ctx.bezierCurveTo(64,237.7,66.7,235,70,235); ctx.bezierCurveTo(73.3,235,76,237.7,76,241); ctx.bezierCurveTo(76,244.3,73.3,247,70,247); ctx.bezierCurveTo(66.7,247,64,244.3,64,241); ctx.moveTo(50,282); ctx.lineTo(50,282); ctx.lineTo(50,282); ctx.lineTo(89,282); ctx.lineTo(89,282); ctx.lineTo(89,234.8); ctx.lineTo(79.3,225); ctx.lineTo(59.8,225); ctx.lineTo(50,234.8); ctx.fillStyle = "rgb(160,174,197)"; ctx.fill(); } <canvas id="cv" height="300"></canvas> body { background-color: #fff; font: 30px sans-serif; } use an iframe compat browser, deer Play on jsdo.it games Share Embed QR Tag Download Complete! Description どんなゲームですか? FireworksからCanvasに描画するためのコマンドをβ公開。 | Yoropan blog http://yoropan.com/blog/archives/806 のテスト 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/eX4K/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/yoropan1/eX4K" title="Fw to Canvas test1">Fw to Canvas test1 - jsdo.it - share JavaScript, HTML5 and CSS</a></p> canvas Tweet twitter Tags canvas Forked sort new page view favorite forked forked: Fw to Canvas test1 makehiro 00 50views 149/1/1 canvas forked: Fw to Canvas test1 tetsu102 00 56views 149/1/1 canvas