Category: Programming
Draw a Circle using javaScript
วาดภาพวงกลม
[html]
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var centerX = c.width / 2;
var centerY = c.height / 2;
var radius = 70;
var color =0;
function drawCircle(){
ctx.fillStyle = ‘TOMATO’;
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
ctx.fill();
ctx.lineWidth = 2;
ctx.strokeStyle = ‘RED’;
ctx.stroke();
}
drawCircle();
</script></p>
</body>
</html>
[/html]
Growing a Circle
มาวาดวงกลมด้วย JavaScript ที่มีรัศมีตั้งแต่ 0 – 70 กัน กำหนดให้เป็น Animation โดยใช้
[js] requestAnimationFrame(drawCircle); [/js]
[html]</pre>
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var centerX = c.width / 2;
var centerY = c.height / 2;
var radius = 0;
var color =0;
function drawCircle(){
ctx.fillStyle = ‘hsl(‘+color++ +’,100%,50%)’;
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
ctx.fill();
radius += 1;
if(radius<100){
requestAnimationFrame(drawCircle);
}
ctx.lineWidth = 2;
ctx.strokeStyle = ‘RED’;
ctx.stroke();
}
drawCircle();
</script>
</body>
</html>
[/html]
C Code
Hello World!
เริ่มต้นเขียนโปรแกรมภาษาซีกัน!
[c]
#include <stdio.h>
void main(){
printf("Hello World");
}
[/c]
PHP & MySQL connection
[php]
<?php
$servername = "localhost";
$username = "root";
$password = "123456789";
// Create connection
$conn = mysqli_connect($servername, $username, $password,$dbname);
// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
echo "Yeah!! connected successfully!!"
?>;
[/php]