Fw to Canvas test1

yoropan1

2011-11-10 23:54:05

License: MIT License

Fork: 0

Fav: 0

View: 690

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();

}

Fw to Canvas test1

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; }

Play on jsdo.it games
Share
Embed
QR
Tag
Download

Complete!

Description どんなゲームですか？

Control Device

	スマートフォンコントローラー jsdo.it WebSocket Controller»
	マウス
	キーボード
	タッチデバイス

Fullscreen

有効
無効

jsdo.it games から削除する Submit

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>

QR Code