کانواس HTML
- پچھلے پیج جسٹا سکریپٹ گرافک
- پچھلے پیج جسٹا سکریپٹ پلٹی جسٹ
HTML Canvas بہت مناسب ہےگراف نقطهاینقطات گراف (Scatter Plots).
HTML Canvas بہت مناسب ہےگراف خطیخطوط گراف (Line Graphs).
HTML Canvas بہت مناسب ہےترکیبگراف نقطهای و خطی.
گراف نقطهای
مقصد کد
const xArray = [50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150];
کنسٹ ی آرائی = [7، 8، 8، 9، 9، 9، 10، 11، 14، 14، 15];
// اسپرائٹ گرا�ک
کنٹیکس.فیل سٹائل = "بلاک";
برائی ڈیورس(آئی = 0؛ آئی < ایکس آرائی.لینگت - 1؛ آئی++) {
ایکس = ایکس آرائی(آئی) * 400 / 150;
ی = ی آرائی(آئی) * 400 / 15;
کنٹیکس.بگین();
کنٹیکس.ایلیپس(ایکس، ی، 2، 3، 0، 0، میٹر پائی * 2);
کنٹیکس.فیل سٹائل = "بلاک";
}
گراف خطی
مقصد کد
let xMax = canvas.height;
let slope = 1.2;
let intercept = 70;
// اسپرائٹ گرا�ک
کنٹیکس.موو تو(0، انٹرسیپٹ);
کنٹیکس.لائن تو(ایکس ماکس، ڈیورس(ایکس ماکس));
کنٹیکس.اسٹرائک سٹائل = "بلاک";
کنٹیکس.اسٹرائک();
// لائن فنکشن
فنکشن ڈیورس(ایکس) {
بائی ڈیورس + انٹرسیپٹ;
}
ترکیب
مقصد کد
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];
کنسٹ ی آرائی = [7، 8، 8، 9، 9، 9، 10، 11، 14، 14، 15];
// اسپرائٹ گرا�ک
کنٹیکس.فیل سٹائل = "بلاک";
برائی ڈیورس(آئی = 0؛ آئی < ایکس آرائی.لینگت - 1؛ آئی++) {
ایکس = ایکس آرائی(آئی) * 400 / 150;
ی = ی آرائی(آئی) * 400 / 15;
کنٹیکس.بگین();
کنٹیکس.ایلیپس(ایکس، ی، 2، 3، 0، 0، میٹر پائی * 2);
کنٹیکس.فیل سٹائل = "بلاک";
}
// پلٹ لائن
کنٹیکس.موو تو(0، انٹرسیپٹ);
کنٹیکس.لائن تو(ایکس ماکس، ڈیورس(ایکس ماکس));
کنٹیکس.اسٹرائک سٹائل = "بلاک";
کنٹیکس.اسٹرائک();
// لائن فنکشن
فنکشن ڈیورس(ایکس) {
بائی ڈیورس + انٹرسیپٹ;
}
- پچھلے پیج جسٹا سکریپٹ گرافک
- پچھلے پیج جسٹا سکریپٹ پلٹی جسٹ
