Harigami
ログイン
anonymous タイトルなし
No License HTML
コピー
<!DOCTYPE html>
<html style="width:1024px; margin:0px;">
	<head>
		<meta charset="UTF-8">

		<style type="text/css">
		.hoge {
			font-size: 12px;
			float: left;
		}
		.hage {
			float: left;
		}
		label{
			display:block;
			position:relative;
			padding-left:1em;
		}
		label input{
			position:absolute;
			top:0;
			bottom:0;
			left:0;
			margin:auto;
		}
		</style>

		<script type="text/javascript">
		<!--
			const colorEFSF = "rgba( 19, 146, 244,1.0)";
			const colorZION = "rgba(255,  48,   0,1.0)";
			const startX = 75;
			const startY = 75;
			const endX = 75;
			const endY = 75;

			var testColor = "";


			const imageWidth = 540;
			const imageHeight = 358;
			var imagePath = "http://msgo.bandainamco-ol.jp/member/concept/map/images/";

			function chipDraw(canvas) {
				var context = canvas.getContext('2d');

				context.fillStyle = testColor;
				context.strokeStyle = "#000000";
				context.lineWidth = 0.25;

				var radius = 4;
				for ( var i = 0; i < 51; i++ ) {

					var randomX = Math.floor( Math.random() * (canvas.width  -  startX - endX ) );
					var randomY = Math.floor( Math.random() * (canvas.height -  startY - endY ) );
					context.beginPath();
					context.arc(randomX + startX , randomY + startY , radius, 0, 2 * Math.PI, false);
					context.fill();
					context.stroke();

				}

				context.translate(150, 95 );

				context.scale(0.345,0.275);
				context.lineWidth = 2;
				context.beginPath();
				context.moveTo( 10,  0);
				context.lineTo( 53,  0);
				context.lineTo( 57, 32);
				context.lineTo( 63, 32);
				context.lineTo( 63, 63);
				context.lineTo(  0, 63);
				context.lineTo(  0, 32);
				context.lineTo(  6, 32);
				context.closePath();
				context.fill();
				context.stroke();

				context.fillStyle = "#000000";
				context.font = "70px arial bold";
				context.fillText("A", -3, 57);
				context.fillText("A", -4, 53);
				context.fillText("A", -2, 53);
				context.fillText("A", -1, 53);
				context.fillStyle = "#FFFFFF";
				context.font = "64px arial";
				context.fillText("A", 0, 55);

			}
			function draw(canvas,imagePath){
				console.log("draw");
				const image = new Image();
				image.addEventListener("load",function (){
					//canvas.width = image.naturalWidth;
					//canvas.height = image.naturalHeight;
					canvas.width = imageWidth;
					canvas.height = imageHeight;
					const ctx = canvas.getContext("2d");
					ctx.drawImage(image, 0 , 0 ,imageWidth, imageHeight);
					console.log("load!");
					chipDraw(canvas);
				});
				image.src = imagePath;
			}
			function mainDraw() {
				//描画コンテキストの取得
				var canvas = document.getElementById('colortest');
				if (canvas.getContext) {
					console.log("color");
					const colors = document.getElementsByName("color");
					for (let i = 0; i < colors.length; i++){
						if(colors[i].checked){
							if( i == 0 ) {
								//console.log("colorEFSF");
								testColor = colorEFSF;
							}
							if( i == 1 ) {
								//console.log("colorZION");
								testColor = colorZION;
							}
							if( i == 2 ) {
								//console.log("user1");
								testColor = document.form1.user1.value;
							}
							if( i == 3 ) {
								//console.log("user1");
								testColor = document.form1.user2.value;
							}
							break;
						}
					}
					var str ="";
					const map = document.getElementsByName("map");
					for (let i = 0; i < map.length; i++){
						if(map[i].checked){
							str = map[i].value;
							break;
						}
					}
					draw(canvas,imagePath + str );
				}
			}
			function pre() {
				var colors = document.getElementsByName("color");
				for ( var i = 0; i < colors.length; i++ ) {
					console.log(colors[i].name);
					colors[i].addEventListener("click", mainDraw );
				}
				colors[0].checked = true;
				var maps = document.getElementsByName("map");
				for ( var i = 0; i < maps.length; i++ ) {
					console.log(maps[i].name);
					maps[i].addEventListener("click", mainDraw );
				}
				maps[0].checked = true;
				mainDraw();
			}
		//-->
		</script>
	</head>
	<body onLoad="pre()">
		<div class="hage" >
			<canvas id="colortest">図形を表示するには、canvasタグをサポートしたブラウザが必要です。</canvas>
		</div>
		<div class="hoge" >
			<form name="form1">
				<label><input type="radio" name="color">EFSF</label>
				<label><input type="radio" name="color">ZION</label>
				<label><input type="radio" name="color">USER1</label>
				<label><input type="radio" name="color">USER2</label>
				<p>USER1<input type="text" name="user1" value="#FFFFFF" ></p>
				<p>USER2<input type="text" name="user2" value="#FFFF00" ></p>
				<br>
			</form>
			<form name="form2">
				<label><input type="radio" name="map" value="001/sentence1_image2.jpg" >オデッサ鉱山基地 懸崖撒手</label>
				<label><input type="radio" name="map" value="001/sentence2_image2.jpg" >オデッサ鉱山基地 虎穴虎子</label>
				<label><input type="radio" name="map" value="001/sentence3_image2.jpg" >オデッサ鉱山基地 雲外蒼天</label>

				<label><input type="radio" name="map" value="008/sentence1_image2.jpg" >北極基地 ブリザード作戦</label>
				<label><input type="radio" name="map" value="008/sentence2_image2.jpg" >北極基地 暗中飛躍</label>
				<label><input type="radio" name="map" value="008/sentence3_image2.jpg" >北極基地 雲竜風虎</label>
			</form>
		</div>
	</body>
</html>
<!DOCTYPE html>
<html style="width:1024px; margin:0px;">
	<head>
		<meta charset="UTF-8">

		<style type="text/css">
		.hoge {
			font-size: 12px;
			float: left;
		}
		.hage {
			float: left;
		}
		label{
			display:block;
			position:relative;
			padding-left:1em;
		}
		label input{
			position:absolute;
			top:0;
			bottom:0;
			left:0;
			margin:auto;
		}
		</style>

		<script type="text/javascript">
		<!--
			const colorEFSF = "rgba( 19, 146, 244,1.0)";
			const colorZION = "rgba(255,  48,   0,1.0)";
			const startX = 75;
			const startY = 75;
			const endX = 75;
			const endY = 75;

			var testColor = "";


			const imageWidth = 540;
			const imageHeight = 358;
			var imagePath = "http://msgo.bandainamco-ol.jp/member/concept/map/images/";

			function chipDraw(canvas) {
				var context = canvas.getContext('2d');

				context.fillStyle = testColor;
				context.strokeStyle = "#000000";
				context.lineWidth = 0.25;

				var radius = 4;
				for ( var i = 0; i < 51; i++ ) {

					var randomX = Math.floor( Math.random() * (canvas.width  -  startX - endX ) );
					var randomY = Math.floor( Math.random() * (canvas.height -  startY - endY ) );
					context.beginPath();
					context.arc(randomX + startX , randomY + startY , radius, 0, 2 * Math.PI, false);
					context.fill();
					context.stroke();

				}

				context.translate(150, 95 );

				context.scale(0.345,0.275);
				context.lineWidth = 2;
				context.beginPath();
				context.moveTo( 10,  0);
				context.lineTo( 53,  0);
				context.lineTo( 57, 32);
				context.lineTo( 63, 32);
				context.lineTo( 63, 63);
				context.lineTo(  0, 63);
				context.lineTo(  0, 32);
				context.lineTo(  6, 32);
				context.closePath();
				context.fill();
				context.stroke();

				context.fillStyle = "#000000";
				context.font = "70px arial bold";
				context.fillText("A", -3, 57);
				context.fillText("A", -4, 53);
				context.fillText("A", -2, 53);
				context.fillText("A", -1, 53);
				context.fillStyle = "#FFFFFF";
				context.font = "64px arial";
				context.fillText("A", 0, 55);

			}
			function draw(canvas,imagePath){
				console.log("draw");
				const image = new Image();
				image.addEventListener("load",function (){
					//canvas.width = image.naturalWidth;
					//canvas.height = image.naturalHeight;
					canvas.width = imageWidth;
					canvas.height = imageHeight;
					const ctx = canvas.getContext("2d");
					ctx.drawImage(image, 0 , 0 ,imageWidth, imageHeight);
					console.log("load!");
					chipDraw(canvas);
				});
				image.src = imagePath;
			}
			function mainDraw() {
				//描画コンテキストの取得
				var canvas = document.getElementById('colortest');
				if (canvas.getContext) {
					console.log("color");
					const colors = document.getElementsByName("color");
					for (let i = 0; i < colors.length; i++){
						if(colors[i].checked){
							if( i == 0 ) {
								//console.log("colorEFSF");
								testColor = colorEFSF;
							}
							if( i == 1 ) {
								//console.log("colorZION");
								testColor = colorZION;
							}
							if( i == 2 ) {
								//console.log("user1");
								testColor = document.form1.user1.value;
							}
							if( i == 3 ) {
								//console.log("user1");
								testColor = document.form1.user2.value;
							}
							break;
						}
					}
					var str ="";
					const map = document.getElementsByName("map");
					for (let i = 0; i < map.length; i++){
						if(map[i].checked){
							str = map[i].value;
							break;
						}
					}
					draw(canvas,imagePath + str );
				}
			}
			function pre() {
				var colors = document.getElementsByName("color");
				for ( var i = 0; i < colors.length; i++ ) {
					console.log(colors[i].name);
					colors[i].addEventListener("click", mainDraw );
				}
				colors[0].checked = true;
				var maps = document.getElementsByName("map");
				for ( var i = 0; i < maps.length; i++ ) {
					console.log(maps[i].name);
					maps[i].addEventListener("click", mainDraw );
				}
				maps[0].checked = true;
				mainDraw();
			}
		//-->
		</script>
	</head>
	<body onLoad="pre()">
		<div class="hage" >
			<canvas id="colortest">図形を表示するには、canvasタグをサポートしたブラウザが必要です。</canvas>
		</div>
		<div class="hoge" >
			<form name="form1">
				<label><input type="radio" name="color">EFSF</label>
				<label><input type="radio" name="color">ZION</label>
				<label><input type="radio" name="color">USER1</label>
				<label><input type="radio" name="color">USER2</label>
				<p>USER1<input type="text" name="user1" value="#FFFFFF" ></p>
				<p>USER2<input type="text" name="user2" value="#FFFF00" ></p>
				<br>
			</form>
			<form name="form2">
				<label><input type="radio" name="map" value="001/sentence1_image2.jpg" >オデッサ鉱山基地 懸崖撒手</label>
				<label><input type="radio" name="map" value="001/sentence2_image2.jpg" >オデッサ鉱山基地 虎穴虎子</label>
				<label><input type="radio" name="map" value="001/sentence3_image2.jpg" >オデッサ鉱山基地 雲外蒼天</label>

				<label><input type="radio" name="map" value="008/sentence1_image2.jpg" >北極基地 ブリザード作戦</label>
				<label><input type="radio" name="map" value="008/sentence2_image2.jpg" >北極基地 暗中飛躍</label>
				<label><input type="radio" name="map" value="008/sentence3_image2.jpg" >北極基地 雲竜風虎</label>
			</form>
		</div>
	</body>
</html>
現在、コメントはありません。
最初のコメンターになりませんか?