<h3>HTML5 à¹à¸«à¸¥à¸à¸£à¸¹à¸à¹à¸à¹à¸²à¸¡à¸²à¹à¸ªà¸à¸à¹à¸ Canvas à¸à¹à¸§à¸¢ Ajax</h3>
<p></br><br />
à¹à¸ HTML5 Canvas à¹à¸£à¸²à¸ªà¸²à¸¡à¸²à¸£à¸à¹à¸«à¸¥à¸à¸£à¸¹à¸à¹à¸«à¹à¹à¸ªà¸£à¹à¸à¸à¹à¸à¸à¹à¸¥à¸°à¹à¸à¹à¸à¸¥à¸²à¸ª new Image() à¹à¸«à¸¥à¸à¸£à¸¹à¸à¸à¸µà¸à¸£à¸à¸à¸«à¸à¸¶à¹à¸à¸à¹à¸à¸à¸à¸µà¹à¹à¸à¹<br />
à¸à¸³à¸ªà¸±à¹à¸ drawImage à¸à¸à¸ context 2d à¹à¸à¸·à¹à¸à¸§à¸²à¸à¸£à¸¹à¸à¹à¸«à¹à¹à¸ªà¸à¸à¸à¸¥à¸à¸ Canvas<br />
<!--more--></p>
<p></br><br />
สาà¹à¸«à¸à¸¸à¸à¸µà¹à¹à¸£à¸²à¸à¸³à¹à¸à¹à¸à¸à¹à¸à¸à¹à¸à¹à¸à¸³à¸ªà¸±à¹à¸à¸à¸à¸ Ajax à¹à¸«à¸¥à¸à¸£à¸¹à¸à¸à¹à¸à¸ à¸à¹à¹à¸à¸·à¹à¸à¹à¸«à¹à¹à¸à¹à¹à¸à¸§à¹à¸²à¸£à¸¹à¸à¸à¸±à¹à¸à¹à¸«à¸¥à¸à¹à¸ªà¸£à¹à¸à¹à¸¥à¹à¸§à¸«à¸£à¸·à¸à¹à¸à¸à¸²à¸£à¸à¸³à¸à¸²à¸à¸à¸£à¸´à¸ à¹<br />
à¹à¸£à¸²à¸à¸²à¸à¸à¸°à¸à¹à¸à¸à¸à¸²à¸£à¸à¸³ preloading หรืภprogress bar à¹à¸à¸·à¹à¸à¹à¸«à¸¥à¸à¸£à¸¹à¸à¸à¸±à¹à¸à¸«à¸¡à¸à¹à¸«à¹à¹à¸ªà¸£à¹à¸à¸à¹à¸à¸à¸à¸µà¹à¸à¸°à¹à¸£à¸´à¹à¸¡à¸à¸³à¸à¸²à¸à¸ªà¹à¸§à¸à¸à¸·à¹à¸ à¹</p>
<p></br></p>
<h4>à¹à¸«à¸¥à¸à¸£à¸¹à¸à¹à¸à¹à¸²à¸¡à¸²à¹à¸ HTML5 Canvas</h4>
<p>à¹à¸£à¸´à¹à¸¡à¸à¹à¸à¸ªà¸£à¹à¸²à¸ canvas ภายà¹à¸ html body tag</p>
<pre class="lang:default decode:true " ><;canvas id="canvas" width="800" height="600">;<;/canvas>;</pre>
<p>à¹à¸«à¸¥à¸à¸£à¸¹à¸à¹à¸«à¹à¹à¸ªà¸£à¹à¸à¸«à¸£à¸·à¸à¸à¸³ progress bar à¹à¸à¸à¸±à¹à¸à¸à¸à¸à¸à¸µà¹ à¸à¹à¸§à¸¢ Jquery Ajax</p>
<pre class="lang:default decode:true " > 
var imageURL = "https://www.codebee.co.th/images/logo1@2x.png"; 
var request = $.ajax({ 
	url: imageURL, 
	crossDomain: true, 
	type: "HEAD", 
	cache: true, 
}); 
request.done(function () { 
			 
});</pre>
<p>วาà¸à¸£à¸¹à¸à¸¥à¸à¹à¸ Canvas à¸à¹à¸§à¸¢à¸à¸³à¸ªà¸±à¹à¸ drawImage à¸à¸à¸ Context 2D</p>
<pre class="lang:default decode:true " >var img = new Image(); 
img.onload = function() { 
	context.drawImage(this, (canvas.width*0.5)-(img.width*0.5), (canvas.height*0.5)-(img.height*0.5)); 
}; 
img.src = imageURL;</pre>
<p>à¸à¸³à¸«à¸à¸à¸à¸³à¹à¸«à¸à¹à¸ x à¹à¸¥à¸° y à¸à¸à¸à¸£à¸¹à¸à¹à¸«à¹à¸à¸¢à¸¹à¹à¸à¸£à¸à¸à¸¥à¸²à¸à¹à¸à¸¢à¸à¸³à¸à¸§à¸à¸à¸²à¸à¸à¸à¸²à¸à¸à¸à¸ canvas à¹à¸¥à¸°à¸à¸à¸²à¸à¸£à¸¹à¸</p>
<pre class="lang:default decode:true " >context.drawImage(this, (canvas.width*0.5)-(img.width*0.5), (canvas.height*0.5)-(img.height*0.5));</pre>
<p>à¹à¸à¹ CSS à¸à¸³à¸«à¸à¸à¸à¸³à¹à¸«à¸à¹à¸à¹à¸«à¹ Canvas Element à¸à¸¢à¸¹à¹à¸à¸£à¸à¸à¸¥à¸²à¸à¹à¸§à¹à¸à¹à¸à¸£à¸²à¸§à¹à¹à¸à¸à¸£à¹</p>
<pre class="lang:default decode:true " ><;style>; 
canvas { 
	padding-left: 0; 
	padding-right: 0; 
	margin-left: auto; 
	margin-right: auto; 
	display: block; 
	width: 800px; 
} 
<;/style>;</pre>
<p>à¸à¸à¸ªà¸à¸à¸à¸²à¸£à¸à¸³à¸à¸²à¸à¸à¸à¸à¹à¸à¹à¸à¸à¸±à¹à¸à¸«à¸¡à¸</p>
<pre class="lang:default decode:true " ><;html>; 
 <;head>; 
 <;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">;<;/script>; 
 <;style>; 
 	canvas { 
		padding-left: 0; 
		padding-right: 0; 
		margin-left: auto; 
		margin-right: auto; 
		display: block; 
		width: 800px; 
	} 
 <;/style>; 
 <;/head>; 
 <;body>; 
 <;canvas id="canvas" width="800" height="600">;<;/canvas>; 
 <;script>; 
 var canvas = document.getElementById('canvas'); 
	 var context = canvas.getContext('2d'); 
	 canvas.style.backgroundColor = "#d8322b"; 
	 
	 var imageURL = "https://www.codebee.co.th/images/logo1@2x.png"; 
	 var request = $.ajax({ 
			url: imageURL, 
			crossDomain: true, 
			type: "HEAD", 
			cache: true, 
		}); 
		request.done(function () { 
			var img = new Image(); 
			img.onload = function() { 
			 context.drawImage(this, (canvas.width*0.5)-(img.width*0.5), (canvas.height*0.5)-(img.height*0.5)); 
			}; 
			img.src = imageURL; 
		}); 
 <;/script>; 
 <;/body>; 
<;/html>; </pre>
<p>à¸à¸±à¸§à¸à¸¢à¹à¸²à¸à¸à¸²à¸£à¸à¸³à¸à¸²à¸ <a href="https://www.codebee.co.th/labs/examples/HTML5-à¹à¸«à¸¥à¸à¸£à¸¹à¸à¹à¸à¹à¸²à¸¡à¸²à¹à¸ªà¸à¸à¹à¸-Canvas-à¸à¹à¸§à¸¢-Ajax.html" target="_blank">HTML5-à¹à¸«à¸¥à¸à¸£à¸¹à¸à¹à¸à¹à¸²à¸¡à¸²à¹à¸ªà¸à¸à¹à¸-Canvas-à¸à¹à¸§à¸¢-Ajax.html</a><br />
<iframe src="https://www.codebee.co.th/labs/examples/HTML5-à¹à¸«à¸¥à¸à¸£à¸¹à¸à¹à¸à¹à¸²à¸¡à¸²à¹à¸ªà¸à¸à¹à¸-Canvas-à¸à¹à¸§à¸¢-Ajax.html" width="640" height="480" scrolling="no" frameborder="0"></iframe></p>

HTML5 โหลดรูปเข้ามาแสดงใน Canvas ด้วย Ajax
html5-เริ่มต้นเขียน