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

		<style type="text/css">
		</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 = colorEFSF;

			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("Ａ", -3, 57);
				context.fillText("Ａ", -4, 53);
				context.fillText("Ａ", -2, 53);
				context.fillText("Ａ", -1, 53);
				context.fillStyle = "#FFFFFF";
				context.font = "64px arial";
				context.fillText("Ａ", 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;
					const ctx = canvas.getContext("2d");
					ctx.drawImage(image, 0, 0);
					console.log("load!");
					chipDraw(canvas);
				});
				image.src = imagePath;
			}
			function sample() {
				//描画コンテキストの取得
				var canvas = document.getElementById('colortest');
				if (canvas.getContext) {
				let imagePath = "http://msgo.bandainamco-ol.jp/member/concept/map/images/001/sentence1_image2.jpg";
				//let imagePath = "http://mmoloda-msgo.x0.com/image/71830.png";
				draw(canvas,imagePath);
				}
			}
		//-->
		</script>
	</head>
	<body onLoad="sample()">
		<canvas id="colortest">図形を表示するには、canvasタグをサポートしたブラウザが必要です。</canvas>
	</body>
</html>

<!DOCTYPE html>
<html style="width:1024px; margin:0px;">
	<head>
		<meta charset="UTF-8">

		<style type="text/css">
		</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 = colorEFSF;

			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("Ａ", -3, 57);
				context.fillText("Ａ", -4, 53);
				context.fillText("Ａ", -2, 53);
				context.fillText("Ａ", -1, 53);
				context.fillStyle = "#FFFFFF";
				context.font = "64px arial";
				context.fillText("Ａ", 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;
					const ctx = canvas.getContext("2d");
					ctx.drawImage(image, 0, 0);
					console.log("load!");
					chipDraw(canvas);
				});
				image.src = imagePath;
			}
			function sample() {
				//描画コンテキストの取得
				var canvas = document.getElementById('colortest');
				if (canvas.getContext) {
				let imagePath = "http://msgo.bandainamco-ol.jp/member/concept/map/images/001/sentence1_image2.jpg";
				//let imagePath = "http://mmoloda-msgo.x0.com/image/71830.png";
				draw(canvas,imagePath);
				}
			}
		//-->
		</script>
	</head>
	<body onLoad="sample()">
		<canvas id="colortest">図形を表示するには、canvasタグをサポートしたブラウザが必要です。</canvas>
	</body>
</html>
現在、コメントはありません。
最初のコメンターになりませんか？