Canvas (Canvas)
«Canvas» یک بوم نقاشی است. روی آن شکل می کشیم. «زمینه دوبعدی (2D Context)» ابزارهای نقاشی را می دهد. با چند خط کد، نقطه و خط رسم می کنیم.
Canvas و نمودار پراکندگی (Scatter)
«نمودار پراکندگی (Scatter Plot)» پخش بودن داده ها را نشان می دهد. مثل قد و نمره کلاس.
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, 2, 3, 0, 0, Math.PI * 2);
ctx.fill();
}
Canvas و نمودار خطی (Line)
«نمودار خطی (Line Graph)» روند را نشان می دهد. مثل رشد قد در سال ها.
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;
}
ترکیب Scatter و Line روی Canvas
گاهی همزمان نقطه ها و خط روند می خواهیم. هر دو را کنار هم بکش.
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
];
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;
}
گام های عملی سریع
- یک <canvas> در HTML بگذار.
- اندازه بوم را تنظیم کن.
- ctx را بگیر و رسم را شروع کن.
نکته: اول مختصات را ساده مقیاس کن. بعد استایل ها را اضافه کن.
جمع بندی سریع
- Canvas انعطاف پذیر و کم هزینه است.
- Scatter برای پخش داده ها کاربردی است.
- Line روند را واضح نشان می دهد.
- می توان Scatter و Line را ترکیب کرد.
برای مرور گرافیک، به گرافیک جاوااسکریپت سر بزن. همچنین صفحه Canvas مرجع سریع تو است.