ผมจะสร้างสี่เหลี่ยมเป็นเเถว เเล้วพอกดตัวเลขให้ไปอยู่ในสี่เหลี่ยม ได้ยังไงครับ

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา ผมจะสร้างสี่เหลี่ยมเป็นเเถว เเล้วพอกดตัวเลขให้ไปอยู่ในสี่เหลี่ยม ได้ยังไงครับ

ผมจะสร้างสีเหลี่ยมเป็นเเถวเเบบนี้ พอกดเลขด้านล่างให้ขึ้นในสี่เหลี่ยมด้านบน เเนะนำหน่อยครับ php

Golff Sinlapachai 17-09-2019 19:23:49

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก

ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
User

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

( หรือ เข้าใช้งานผ่าน Social Login )

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ความคิดเห็นที่ 1

ใช่เเบบนี้รึป่าวครับ ถ้าใช่ต้องใช้ตัวไหนครับ

1.
https://www.w3schools.com/css/css3_flexbox.asp?fbclid=IwAR2cye8tOkE_A7ShMnmku_iTKzbVoG7Ev-iNupXmMrJShqajb18ypBaxhlE

2.
https://www.w3schools.com/graphics/canvas_drawing.asp

Golff Sinlapachai 18-09-2019 08:34

ความคิดเห็นที่ 2

น่าจะแนวๆ นั้น หรือไม่ก็ประยุกต์พวก JavaScript ร่วมกับ HTML5 และก็ Canvas

ninenik 18-09-2019

ความคิดเห็นที่ 3

พอจะมีตัวอย่างไหมครับ

Golff Sinlapachai 18-09-2019 10:16

ความคิดเห็นที่ 4

ศึกษาเกี่ยวกับ canvas API เพิ่มเติมได้ที่
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API

โค้ดตัวอย่าง

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body onload="draw();">
<canvas id="canvas" width="200" height="100"></canvas>
<br>
<button id="btn1" type="button">Add</button>


<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
$(function(){
  
  // ค่าเร่ิมต้น
  var n = 0;  // ลำดับรายการ
  var num = 0; // ข้อความตัวเลข
  // ตำแหน่ง x y ของข้อความ
  var _x = 17;
  var _y = 34;
  // ตำแหน่ง x y ของวงกลม
  var _c_x = 25;
  var _c_y = 25;  
  
  // ทดสอบทำคำสั่งเพื่อมีการคลิก
  $("#btn1").click(function(){

    n++;  // เพิ่มลำดับรายการ
    num++; // เพิ่มตัวเลข
    _x = (50*n)-33; // สูตรตำแหน่ง จากพิกัด x ของข้อความ
    console.log(_x);    
    _c_x = 25*((2*n)-1); // สูตรตำแหน่ง จากพิกัด x ของวงกลม
    console.log(_c_x);    
    var ctx = canvas.getContext('2d');
    if(n!=1 && n%4==1){ // สร้างเงื่อนไข เมื่อขึ้นแถวใหม่
      n = 1;
      _c_x = 25;
      _c_y+=50;
      
      _x = 17;
      _y+=50;
    }
	
	// กำหนดรูปแบบการวาดวงกลม
    var circle = new Path2D();
    circle.arc(_c_x, _c_y, 18, 0, 2 * Math.PI);
	
	// วาดวงกลมลงใน canvas
    ctx.fillStyle = 'black';
    ctx.fill(circle);

	// กำหนดรูปแบบข้อความ
    ctx.font = '25px tahoma';
    ctx.fillStyle = '#FFFF8D';
	
	// เขียนข้อความ ในที่นี้คืิอตัวแปรตัวเลข
    ctx.fillText(num, _x, _y);     
    
  });
  
});  
// เมื่อหน้า page ให้วาดตารางลงใน canvas
function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
 
	// กำหนดรูปแบบการวาดสี่เเหลี่ยม 
    var rectangle = new Path2D();
    rectangle.rect(0, 0, 200, 100);
    
	// วาดสี่เหลี่ยมลงใน canvas
    ctx.fillStyle = '#E6E6E6';
    ctx.fill(rectangle);

	// วาดเส้นตาราง
    ctx.strokeStyle = '#D9D9D9';
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.moveTo(0, 50);
    ctx.lineTo(200, 50);
    ctx.moveTo(50, 0);
    ctx.lineTo(50, 100);
    ctx.moveTo(100, 0);
    ctx.lineTo(100, 100);
    ctx.moveTo(150, 0);
    ctx.lineTo(150, 100);    
    ctx.stroke();   

  }
}
  
</script>
</body>
</html>

แนวทางการหาสมการ สำหรับโปรแกรมจุดพิกัด ตามค่า numeric sequence
สมมติเรารู้ว่า ตำแหน่งของ object หรือวส่วนที่เราต้องการแสดง จะอยู่ที่จุดใดได้บ้าง
อย่างจุดกึ่งกลาง ตำแหน่งที่เราจะวางวงกลม คือ
25,25 75,25 125,25 และ 175,25 สำหรับแถวแรก เป็นพิกัด x,y ของวงกลมที่จะถูกวาดลงไปใน canvas
ให้เราเอาค่า x ที่เปลี่ยนแปลง ทำเป็น numeric sequence จะได้เป็น 25,75,125,175
นำค่าไปใส่ในหน้า Pattern Solver เพื่อหาสมการ

เราจะได้สูตรมาใช้งาน

ตัวอย่าง DEMO

ninenik 18-09-2019

ความคิดเห็นที่ 5

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body onload="draw();">
<canvas id="canvas" width="200" height="100"></canvas>
<br>
  <button class="btn1" type="button">1</button>
  <button class="btn1" type="button">2</button>  
  <button class="btn1" type="button">3</button><br/>
  <button class="btn1" type="button">4</button>
  <button class="btn1" type="button">5</button>
  <button class="btn1" type="button">6</button><br/>
  <button class="btn1" type="button">7</button>
  <button class="btn1" type="button">8</button>
  <button class="btn1" type="button">9</button>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
$(function(){
  
  // ค่าเร่ิมต้น
  var n = 0;  // ลำดับรายการ
  var num = 0; // ข้อความตัวเลข
  // ตำแหน่ง x y ของข้อความ
  var _x = 17;
  var _y = 34;
  // ตำแหน่ง x y ของวงกลม
  var _c_x = 25;
  var _c_y = 25;  
  
  // ทดสอบทำคำสั่งเพื่อมีการคลิก
  $(".btn1").click(function(){

    n++;  // เพิ่มลำดับรายการ
    num = $(this).text(); // เพิ่มตัวเลขจากค่าที่ส่งมา
    _x = (50*n)-33; // สูตรตำแหน่ง จากพิกัด x ของข้อความ
    console.log(_x);    
    _c_x = 25*((2*n)-1); // สูตรตำแหน่ง จากพิกัด x ของวงกลม
    console.log(_c_x);    
    var ctx = canvas.getContext('2d');
    if(n!=1 && n%4==1){ // สร้างเงื่อนไข เมื่อขึ้นแถวใหม่
      n = 1;
      _c_x = 25;
      _c_y+=50;
      
      _x = 17;
      _y+=50;
    }
	
	// กำหนดรูปแบบการวาดวงกลม
    var circle = new Path2D();
    circle.arc(_c_x, _c_y, 18, 0, 2 * Math.PI);
	
	// วาดวงกลมลงใน canvas
    var colorCiclr = (n%2==0)?"#C91C1D":"black";
    ctx.fillStyle = colorCiclr;
    ctx.fill(circle);

	// กำหนดรูปแบบข้อความ
    ctx.font = '25px tahoma';
    ctx.fillStyle = '#FFFF8D';
	
	// เขียนข้อความ ในที่นี้คืิอตัวแปรตัวเลข
    ctx.fillText(num, _x, _y);     
    
  });
  
});  
// เมื่ดหน้า page ให้วดตาลรางลองใน canvas
function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
 
	// กำหนดรูปแบบการวาดสี่เเหลี่ยม 
    var rectangle = new Path2D();
    rectangle.rect(0, 0, 200, 100);
    
	// วาดสี่เหลี่ยมลงใน canvas
    ctx.fillStyle = '#E6E6E6';
    ctx.fill(rectangle);

	// วาดเส้นตาราง
    ctx.strokeStyle = '#D9D9D9';
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.moveTo(0, 50);
    ctx.lineTo(200, 50);
    ctx.moveTo(50, 0);
    ctx.lineTo(50, 100);
    ctx.moveTo(100, 0);
    ctx.lineTo(100, 100);
    ctx.moveTo(150, 0);
    ctx.lineTo(150, 100);    
    ctx.stroke();   

  }
}
  
</script>
</body>
</html>

>>> อัพเดท >>> 18-09-2019
------------------------------------------
เพิ่มปุ่ม reset

<button id="reset" type="button">&nbsp;&nbsp;RESET&nbsp;&nbsp;&nbsp;</button>

เรียกคำสั่ง reset

  $("#reset").click(function(){
    draw();
    // ค่าเร่ิมต้น
    n = 0;  // ลำดับรายการ
    num = 0; // ข้อความตัวเลข
    // ตำแหน่ง x y ของข้อความ
    _x = 17;
    _y = 34;
    // ตำแหน่ง x y ของวงกลม
    _c_x = 25;
    _c_y = 25;      
  });

ตัวอย่าง DEMO

ninenik 18-09-2019

ความคิดเห็นที่ 6

ขอบคุณครับ มีคำถามครับ

ทำไมค่า x ที่ ทำเป็น numeric sequence ต้องใช้ 4 ตัวครับ 25,75,125,175

ถ้าเราใช้ 6 ตัว 25,75,125,175, 225, 275 มันต่างกันยังไงครับ

หรือว่าถ้าทำเป็น numeric sequence ใช้เเค่4ตัวพอ

Golff Sinlapachai 19-09-2019 09:21

ความคิดเห็นที่ 7

ได้เเล้วครับ ผมถ้าจะใส่ตัวเลขผิดเว็บเลยคำนวนไม่ได้
ขอบคุณครับ

นอกเรื่องหน่อยครับเวลากดตอบกระทู้พอกดเเล้วขึ้น เกิดข้อมผิดพลาด เป็นทุกครั้งที่กดครับต้องกดอีกทีถึงจะได้

Golff Sinlapachai 19-09-2019 09:32

ความคิดเห็นที่ 8

ตัวอย่าง 25,25 75,25 125,25 และ 175,25 คือพิกัดตำแหน่ง x,y ที่เราจะใช้งานในแต่ละจุด

ส่วนจะใช้ค่าใดในการหาสูตร หรือสมการของตัวเลข ขึ้นกับว่าเราสนใจที่ตำแหน่งไหน อาจจะสนใจทั้งสองตำแหน่งก็ได้

แต่ในที่นี้ ตำแหน่ง y เป็นค่าเหมือนเดิมตลอด อาจจะเปลียนบ้างถ้าอยู่ในแถวที่ 2 ซึ่งการเปลี่ยนก็มีสูตรง่ายๆ คือบวกเพิ่ม 50

ดังนั้นก็ไม่จำเป็นต้องหาสมการหรือสูตรการหาค่าที่ยุ่งยาก

numeric sequence หรือลำดับตัวเลข ที่มีการเพิ่มหรือลดค่าในอัตราส่วนใดๆ เช่น 2,4,6,8 ลักษณะการเพิ่มแบบนี้

เป็นรูปแบบง่าย ที่เราเดาได้ว่าเพิ่มทีละ 2 หรือสมการ 2n เมื่อ n คือลำดับของตัวเลข

แต่สำหรับบางค่า เช่น 25,75,125,175 เราอาจจะหาสูตรยากหน่อยหรือใช้เวลา จึงได้แนะนำแนวทางเป็นเครื่องมือข้างต้นให้

กรณีปัญหาการใช้งาน เมื่อตั้งคำถามหรือตอบคำถามในเว็บบอร์ด จะเกิดจากค่าที่ตรวจสอบด้วย Google reCAPTCHA v3 ส่งกลับมา

แล้วหมดอายุเร็วไปหน่อย ถ้าพิมพ์คำถามหรือตอบด้วยข้อความยาวๆ หรือพิมพ์นาน ค่าที่ตรวจสอบจะหมดอายุ ทำให้กลับมาที่หน้า

ฟอร์มอีกครั้ง แต่ข้อมูลที่พิมพ์จะไม่หายไป สามารถกดตั้งคำถาม หรือตอบคำถามจากข้อมูลเก่าโดยไม่ต้องพิมพ์ใหม่ได้เลย

ninenik 19-09-2019

ความคิดเห็นที่ 9

ผมอยากให้เมื่อกดตัวเลข 4 ครั้ง ให้มันโชว์พื้นหลังสีเหลืองเฉพาะในกรอบที่วงไว้ เหมือนเราเอาเม้าส์ชี้ที่ตัวเลขครับ
เเล้วพอกดครั้งที่ 5 ให้กรอบหายเเล้วเเสดงเลขที่กดครั้งที่ 5ในตารางข้างล่าง จากนั้นก็นับอีก4ทีใหม่
ต้องเขียนเช็คว่ากดกี่ครั้งประมาณไหนบ้างครับ ขอบคุณครับ

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Document</title>
	<style>
		.grid-container {
			display: grid;
			grid-template-columns:auto auto auto auto auto auto auto auto auto auto auto auto auto;
			grid-gap: 2px;
			background-color: #2196F3;
			padding: 10px;

		}

		.grid-container > div {
			background-color: lightblue;
			text-align: center;
			padding: 10px ;
			font-size: 30px;

		}

		#item1 {
			grid-row: 1 / 4;
		}
	</style>
</head>
<body onload="draw();">
	<canvas id="canvas" width="1000" height="150"></canvas>
	<br>
	  <button class="btn1" type="button">1</button>
	  <button class="btn1" type="button">2</button>  
	  <button class="btn1" type="button">3</button><br>
	  <button class="btn1" type="button">4</button>
	  <button class="btn1" type="button">5</button>
	  <button class="btn1" type="button">6</button><br>
	  <button class="btn1" type="button">7</button>
	  <button class="btn1" type="button">8</button>
	  <button class="btn1" type="button">9</button><br>
	<button id="reset" type="button">&nbsp;&nbsp;RESET&nbsp;&nbsp;&nbsp;</button>

	<div class="grid-container" style="width: 70%" 
	>
	<div class="btn1" id="item1" 
	onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';"
	font color="red">0</div>

	<div class="btn1" 
	onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';"><font color=red>3</font></div>

	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';">6</div>  
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';"><font color=red>9</font></div>
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';"><font color=red>12</font></div>
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';">15</div>
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';"><font color=red>18</font></div>
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';"><font color=red>21</font></div>  
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';">24</div>
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';"><font color=red>27</font></div>
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
		onMouseout="this.style.backgroundColor='lightblue';"><font color=red>30</font></div>
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';">33</div>
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';">36</div>
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';">2</div>
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';"><font color=red>5</font></div>
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';">8</div>
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';">11</div>
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';"><font color=red>14</font></div>
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';">17</div>
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';">20</div>
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';"><font color=red>23</font></div>
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';">26</div>
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';">29</div>
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';"><font color=red>32</font></div>
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';">35</div>
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';"
	><font color=red>1</font></div>
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';">4</div>
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';"><font color=red>7</font></div>
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';">10</div>
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';">13</div>
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';"><font color=red>16</font></div>
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';"><font color=red>19</font></div>
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';">22</div>
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';"><font color=red>25</font></div>
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';">28</div>
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';">31</div>
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';"><font color=red>34</font></div>

</div>
<canvas id="canvas2" width="1100" height="50"></canvas>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
//1 3 5 7 9 12 14 16 18 19 21 23 25 27 30 32 34 36


$(function(){
  // ค่าเร่ิมต้น
  var n = 0;  // ลำดับรายการ
  var num = 0; // ข้อความตัวเลข
  // ตำแหน่ง x y ของข้อความ
  var _x = 17;
  var _y = 34;
  // ตำแหน่ง x y ของวงกลม
  var _c_x = 25;
  var _c_y = 25;  
   
  
$("#reset").click(function(){
	  draw();
  // ค่าเร่ิมต้น
  n = 0;  // ลำดับรายการ
  num = 0; // ข้อความตัวเลข
  // ตำแหน่ง x y ของข้อความ
  _x = 17;
  _y = 34;
  // ตำแหน่ง x y ของวงกลม
  _c_x = 25;
  _c_y = 25;      
});

// ทดสอบทำคำสั่งเพื่อมีการคลิก
  $(".btn1").click(function(){
	 
    n++;  // เพิ่มลำดับรายการ
    num = $(this).text(); // เพิ่มตัวเลขจากค่าที่ส่งมา
    _x = (50*n)-33; // สูตรตำแหน่ง จากพิกัด x ของข้อความ
    console.log(_x);    
    _c_x = 25*((2*n)-1); // สูตรตำแหน่ง จากพิกัด x ของวงกลม
    console.log(_c_x);    
    var ctx = canvas.getContext('2d');
	
    if(n!=1 && n%20==1){ // สร้างเงื่อนไข เมื่อขึ้นแถวใหม่
	      n = 1;
	      _c_x = 25;
	      _c_y+=50;
	       
	      _x = 17;
	      _y+=50;
    }
     
    // กำหนดรูปแบบการวาดวงกลม
    var circle = new Path2D();
    circle.arc(_c_x, _c_y, 23, 0, 2 * Math.PI);
     
    // วาดวงกลมลงใน canvas

if (num==0) {
	    var colorCiclr = "#96F56E";
}else{

	var colorCiclr = (num==1||num==3)?"#C91C1D":"black";
}
    ctx.fillStyle = colorCiclr;
    ctx.fill(circle);
 
    // กำหนดรูปแบบข้อความ
    ctx.font = '25px tahoma';
    ctx.fillStyle = '#FFFF8D';
     
    // เขียนข้อความ ในที่นี้คืิอตัวแปรตัวเลข
    ctx.fillText(num, _x, _y);  

   
  });
   
});  
// เมื่ดหน้า page ให้วดตาลรางลองใน canvas
function draw() {
	  var canvas = document.getElementById('canvas');
		
	  if (canvas.getContext) {
		    var ctx = canvas.getContext('2d');
		  
    // กำหนดรูปแบบการวาดสี่เเหลี่ยม 
    var rectangle = new Path2D();
    rectangle.rect(0, 0, 1000, 150);
     
    // วาดสี่เหลี่ยมลงใน canvas
    ctx.fillStyle = '#E6E6E6';
    ctx.fill(rectangle);
 
    // วาดเส้นตาราง
    ctx.strokeStyle = '#D9D9D9';
    ctx.lineWidth = 2;
    ctx.beginPath();
    
    ctx.moveTo(0, 50);
    ctx.lineTo(1000, 50);
    ctx.moveTo(0, 100);
    ctx.lineTo(1000, 100); 
    ctx.moveTo(50, 0);
    ctx.lineTo(50, 150);
    ctx.moveTo(100, 0);
    ctx.lineTo(100, 150);
    ctx.moveTo(150, 0);
    ctx.lineTo(150, 150);  
ctx.moveTo(200, 0);
    ctx.lineTo(200, 150); 
ctx.moveTo(250, 0);
    ctx.lineTo(250, 150);  
ctx.moveTo(300, 0);
    ctx.lineTo(300, 150); 
ctx.moveTo(350, 0);
    ctx.lineTo(350, 150); 
ctx.moveTo(400, 0);
    ctx.lineTo(400, 150); 
ctx.moveTo(450, 0);
    ctx.lineTo(450, 150);
ctx.moveTo(500, 0);
    ctx.lineTo(500, 150);  
ctx.moveTo(550, 0);
    ctx.lineTo(550, 150);
ctx.moveTo(600, 0);
    ctx.lineTo(600, 150);
ctx.moveTo(650, 0);
    ctx.lineTo(650, 150);
ctx.moveTo(700, 0);
    ctx.lineTo(700, 150);
ctx.moveTo(750, 0);
    ctx.lineTo(750, 150);
ctx.moveTo(800, 0);
    ctx.lineTo(800, 150);
ctx.moveTo(850, 0);
    ctx.lineTo(850, 150);
ctx.moveTo(900, 0);
    ctx.lineTo(900, 150);   
ctx.moveTo(950, 0);
    ctx.lineTo(950, 150); 
    ctx.stroke();   
 
  }
if (canvas2.getContext) {
		    var ctx2 = canvas2.getContext('2d');
		  
    // กำหนดรูปแบบการวาดสี่เเหลี่ยม 
    var rectangle = new Path2D();
    rectangle.rect(100, 0, 1100, 50);
     
    // วาดสี่เหลี่ยมลงใน canvas
    ctx2.fillStyle = '#E6E6E6';
    ctx2.fill(rectangle);
 
    // วาดเส้นตาราง
    ctx2.strokeStyle = '#D9D9D9';
    ctx2.lineWidth = 2;
    ctx2.beginPath();
    
	ctx2.font = "30px Arial";
	
	ctx2.fillStyle = "red";
    ctx2.fillText("ครั้งที่ 5", 0, 50);
	
	ctx2.moveTo(100, 0);
    ctx2.lineTo(100, 50);
	ctx2.moveTo(150, 0);
    ctx2.lineTo(150, 50);
	ctx2.moveTo(200, 0);
    ctx2.lineTo(200, 50);
	ctx2.moveTo(250, 0);
    ctx2.lineTo(250, 50);
	ctx2.moveTo(300, 0);
    ctx2.lineTo(300, 50);
	ctx2.moveTo(350, 0);
    ctx2.lineTo(350, 50);
	ctx2.moveTo(400, 0);
    ctx2.lineTo(400, 50);
	ctx2.moveTo(450, 0);
    ctx2.lineTo(450, 50);
	ctx2.moveTo(500, 0);
    ctx2.lineTo(500, 50);
	ctx2.moveTo(550, 0);
    ctx2.lineTo(550, 50);
	ctx2.moveTo(600, 0);
    ctx2.lineTo(600, 50);
	ctx2.moveTo(650, 0);
    ctx2.lineTo(650, 50);
	ctx2.moveTo(700, 0);
    ctx2.lineTo(700, 50);
	ctx2.moveTo(750, 0);
    ctx2.lineTo(750, 50);
    ctx2.moveTo(800, 0);
    ctx2.lineTo(800, 50);
	ctx2.moveTo(850, 0);
    ctx2.lineTo(850, 50);
	ctx2.moveTo(900, 0);
    ctx2.lineTo(900, 50);
	ctx2.moveTo(950, 0);
    ctx2.lineTo(950, 50);
    ctx2.moveTo(1000, 0);
    ctx2.lineTo(1000, 50);
	ctx2.moveTo(1050, 0);
    ctx2.lineTo(1050, 50);
    ctx2.stroke();   
 
  }
}




</script>



</body>


</html>

Golff Sinlapachai 23-09-2019 14:18

ความคิดเห็นที่ 10

ถามหน่อยครับ
เราจะเช็คยังไงครับว่าเลขที่กดเป็นเลขคู่ทั้ง4ตัวหรือเลขคี่ทั้ง4ตัวครับ

ผมจะทำถ้ากดตัวเลขคู่ 4 ครั้ง ให้มันโชว์พื้นหลังสีเหลืองที่เลข(1,2,3,4,5,6,7,8,)

ผมจะทำถ้ากดตัวเลขคี่ 4 ครั้ง ให้มันโชว์พื้นหลังสีเหลืองที่เลข(13,14,15,16,17,18,19,20,21,22,23,24)

เเละกดครั้งที่5ให้เเสดงที่ข้างล่างด้วย

Golff Sinlapachai 02-10-2019 10:32

1 2 3 Next

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน