Lienzo HTML

Tabla de contenido

    Mostrar tabla de contenidos

HTML Canvas es perfecto para gráficos de dispersión

HTML Canvas es perfecto para gráficos de líneas

HTML Canvas es perfecto para combinar Dispersión y Líneas

Gráfico de dispersión

<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(); }

Código fuente

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();
}

Pruébelo usted mismo →

<!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>

Gráficos lineales

<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; }

Código fuente

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;
}

Pruébelo usted mismo →

<!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>

Conjunto

<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; }

Código fuente

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;
}

Pruébelo usted mismo →

<!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>