ایچ تی ایم ایل کینواس ڈرائسنگ

جیواسکریپت استعمال کرکے کینواس پر نقش کرنا

HTML کینواس پر تمام پینٹنگ جیسیں جیواسکریپت استعمال کرکے انجام دی جاتی ہیں:

مثال

<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>

خود کا تجربہ کریں

پہلا قدم: کینواس علامت تلاش کرنا

پہلے آپ کو <canvas> علامت کو تلاش کرنا ہوگا۔

یہ HTML DOM مہارت getElementById() استعمال کرکے انجام دیا جاتا ہے:

const canvas = document.getElementById("myCanvas");

دوسرا قدم: پینٹنگ اکائی تیار کرنا

آپ کے لیے ایک کینواس پینٹنگ اکائی کی ضرورت ہوتی ہے۔

getContext() ایک داخلی HTML اکائی ہے، جو پینٹنگ کے لیے استعمال کئے جانے والی ویژگیاں اور مہارتاں فراہم کرتی ہے:

const ctx = canvas.getContext("2d");

تیسرا قدم: کینواس پر نقش کرنا

آخر میں، آپ کینواس پر نقش کرسکتے ہیں۔

پینٹنگ اکائی کا پینل کا رجحان کو لال کیا جائے:

ctx.fillStyle = "#FF0000";

fillStyle نمائش کی جگہ کا ویژگی CSS رنگ، گرینڈ یا پٹرن ہو سکتا ہے۔ جائز کا default fillStyle کالام کا رنگ ہوتا ہے۔

fillRect(x,y,width,height) مہارت استعمال کرکے کینواس پر ایک مستطیل نقش کرنا، استعمال کئے جانے والے پینل کا رجحان استعمال کریں:

ctx.fillRect(0, 0, 150, 75);

دوسرے مراجع دیکھئے:

کدوو3 سی کا پورا کینواس مراجع دستورات