วาดภาพวงกลม
[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]
Month: September 2018
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]