ผ้าใบ HTML

สารบัญ

    แสดงสารบัญ

HTML Canvas เหมาะสำหรับ Scatter Plots

HTML Canvas เหมาะสำหรับ กราฟเส้น

HTML Canvas เหมาะอย่างยิ่งสำหรับการรวม Scatter และ Lines

แผนกระจาย

<script> const canvas = document.getElementById("myCanvas"); const ctx = canvas.getContext("2d"); canvas.height = canvas.width; ctx.transform(1, 0, 0, -1, 0, canvas.height) const xArray = [50,60,70,80,90,100,110,120,130,140,150]; const yArray = [7,8,8,9,9,9,10,11,14,14,15]; ctx.fillStyle = "red"; for (let i = 0; i < xArray.length-1; i++) { let x = xArray[i]*400/150; let y = yArray[i]*400/15; ctx.beginPath(); ctx.ellipse(x, y, 3, 3, 0, 0, Math.PI * 2); ctx.fill(); }

รหัสแหล่งที่มา

const xArray = [50,60,70,80,90,100,110,120,130,140,150];
const yArray = [7,8,8,9,9,9,10,11,14,14,15];

// Plot Scatter
ctx.fillStyle = "red";
for (let i = 0; i < xArray.length-1; i++) {
  let x = xArray[i]*400/150;
  let y = yArray[i]*400/15;
  ctx.beginPath();
  ctx.ellipse(x, y, 2, 3, 0, 0, Math.PI * 2);
  ctx.fill();
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="400" height="400" style="border:1px solid grey"></canvas>

<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
canvas.height = canvas.width;
ctx.transform(1, 0, 0, -1, 0, canvas.height)

const xArray = [50,60,70,80,90,100,110,120,130,140,150];
const yArray = [7,8,8,9,9,9,10,11,14,14,15];

ctx.fillStyle = "red";
for (let i = 0; i < xArray.length-1; i++) {
  let x = xArray[i]*400/150;
  let y = yArray[i]*400/15;
  ctx.beginPath();
  ctx.ellipse(x, y, 3, 3, 0, 0, Math.PI * 2);
  ctx.fill();
}
</script>

</body>
</html>

กราฟเส้น

<script> const canvas2 = document.getElementById("myCanvas2"); const ctx2 = canvas2.getContext("2d"); ctx.fillStyle = "#FF0000"; canvas2.height = canvas.width; ctx2.transform(1, 0, 0, -1, 0, canvas2.height) let xMax = canvas2.height; let slope = 1.2; let intercept = 70; ctx2.moveTo(0, intercept); ctx2.lineTo(xMax, f(xMax)); ctx2.strokeStyle = "black"; ctx2.stroke(); function f(x) { return x * slope + intercept; }

รหัสแหล่งที่มา

let xMax = canvas.height;
let slope = 1.2;
let intercept = 70;

// Plot Scatter
ctx.moveTo(0, intercept);
ctx.lineTo(xMax, f(xMax));
ctx.strokeStyle = "black";
ctx.stroke();

// Line Function
function f(x) {
  return x * slope + intercept;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="400" height="400" style="border:1px solid grey"></canvas>

<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
canvas.height = canvas.width;
ctx.transform(1, 0, 0, -1, 0, canvas.height)

let xMax = canvas.height;
let slope = 1.2;
let intercept = 70;

ctx.moveTo(0, intercept);
ctx.lineTo(xMax, f(xMax));
ctx.strokeStyle = "black";
ctx.stroke();

function f(x) {
  return x * slope + intercept;
}
</script>

</body>
</html>

รวม

<script> const canvas3 = document.getElementById("myCanvas3"); const ctx3 = canvas3.getContext("2d"); ctx3.fillStyle = "#FF0000"; canvas3.height = canvas3.width; ctx3.transform(1, 0, 0, -1, 0, canvas3.height) let xMax3 = canvas3.height; let yMax3 = canvas3.width; let slope3 = 1.2; let intercept3 = 70; const xArray3 = [50,60,70,80,90,100,110,120,130,140,150]; const yArray3 = [7,8,8,9,9,9,10,11,14,14,15]; // Plot Scatter ctx3.fillStyle = "red"; for (let i = 0; i < xArray3.length-1; i++) { let x = xArray3[i]*xMax3/150; let y = yArray3[i]*yMax3/15; ctx3.beginPath(); ctx3.ellipse(x, y, 3, 3, 0, 0, Math.PI * 2); ctx3.fill(); } // Plot Line ctx3.moveTo(0, intercept3); ctx3.lineTo(xMax3, f(xMax3)); ctx3.strokeStyle = "black"; ctx3.stroke(); // Line Function
function f(x) { return x * slope3 + intercept3; }

รหัสแหล่งที่มา

let xMax = canvas.height;
let yMax = canvas.width;
let slope = 1.2;
let intercept = 70;

const xArray = [50,60,70,80,90,100,110,120,130,140,150];
const yArray = [7,8,8,9,9,9,10,11,14,14,15];

// Plot Scatter
ctx.fillStyle = "red";
for (let i = 0; i < xArray.length-1; i++) {
  let x = xArray[i]*400/150;
  let y = yArray[i]*400/15;
  ctx.beginPath();
  ctx.ellipse(x, y, 2, 3, 0, 0, Math.PI * 2);
  ctx.fill();
}

// Plot Line
ctx.moveTo(0, intercept);
ctx.lineTo(xMax, f(xMax));
ctx.strokeStyle = "black";
ctx.stroke();

// Line Function
function f(x) {
  return x * slope + intercept;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="400" height="400" style="border:1px solid grey"></canvas>

<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
canvas.height = canvas.width;
ctx.transform(1, 0, 0, -1, 0, canvas.height)

let xMax = canvas.height;
let yMax = canvas.width;
let slope = 1.2;
let intercept = 70;

const xArray = [50,60,70,80,90,100,110,120,130,140,150];
const yArray = [7,8,8,9,9,9,10,11,14,14,15];

// Plot Scatter
ctx.fillStyle = "red";
for (let i = 0; i < xArray.length-1; i++) {
  let x = xArray[i]*xMax/150;
  let y = yArray[i]*yMax/15;
  ctx.beginPath();
  ctx.ellipse(x, y, 3, 3, 0, 0, Math.PI * 2);
  ctx.fill();
}

// Plot Line
ctx.moveTo(0, intercept);
ctx.lineTo(xMax, f(xMax));
ctx.strokeStyle = "black";
ctx.stroke();

// Line Function<br>
function f(x) {
  return x * slope + intercept;
}
</script>

</body>
</html>