HTML Canvas
- الصفحة السابقة JS الرسومات
- الصفحة التالية JS Plotly.js
HTML Canvas مناسبة جدًاالرسوم البيانية النقطيةالرسوم البيانية النقطية (Scatter Plots).
HTML Canvas مناسبة جدًاالرسوم البيانية الخطيةالرسوم البيانية الخطية (Line Graphs).
HTML Canvas مناسبة جدًاالدمجالرسوم البيانية النقطية والخطية.
الرسوم البيانية النقطية
كود المصدر
تتكون قائمة 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, 2, 3, 0, 0, Math.PI * 2);
ctx.fill();
}
الرسوم البيانية الخطية
كود المصدر
تُعين xMax = طول اللوحة;
تُعين slope = 1.2;
تُعين intercept = 70;
// رسم نقاط متفرقة
ctx.moveTo(0, intercept);
ctx.lineTo(xMax, f(xMax));
ctx.strokeStyle = "black";
ctx.stroke();
// دالة الخط
function f(x) {
return x * slope + intercept;
}
الدمج
كود المصدر
تُعين xMax = طول اللوحة;
تُعين yMax = عرض اللوحة;
تُعين slope = 1.2;
تُعين intercept = 70;
تتكون قائمة 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, 2, 3, 0, 0, Math.PI * 2);
ctx.fill();
}
// خط الرسم
ctx.moveTo(0, intercept);
ctx.lineTo(xMax, f(xMax));
ctx.strokeStyle = "black";
ctx.stroke();
// دالة الخط
function f(x) {
return x * slope + intercept;
}
- الصفحة السابقة JS الرسومات
- الصفحة التالية JS Plotly.js
