ایچ ٹی ایم ایل کینوس کے ساتھ شروع کریں

Sep 11, 2025
کيسے

ایچ ٹی ایم ایل اور ایل ٹی؛ کینوس اور جی ٹی؛ عنصر ویب پر پکسل پر مبنی گرافکس بنانے کے لئے ایک طاقتور حل ہے جاوا اسکرپٹ ، اور آپ کو تھوڑا سا مشق کے ساتھ کچھ قابل ذکر اثرات پیدا کرنے کی اجازت دے گی.

اس سبق میں، ہم ایک کینوس کی آبجیکٹ بنانے، اس پر سادہ بصری ڈرائنگ اور ان بصریوں کو متحرک کرنے میں ایک نظر ڈالیں گے.

01. ایک صفحہ بنائیں

کینوس بنیادی طور پر ایک ایچ ٹی ایم ایل عنصر ہے جو آپ صفحے پر رکھتا ہے، اس علاقے کو پورا کرنے کے لئے پیمانے پر پیمانہ کریں جو آپ چاہتے ہیں اور پھر اس پر ڈال سکتے ہیں. شروع کرنے کے لئے، ہمیں ایک کینوس کی چیز کے ساتھ ایک سادہ صفحہ بنانا ہوگا. 

 اور ایل ٹی؛! DOCTYPE ایچ ٹی ایم ایل اور جی ٹی؛
& lt؛ ایچ ٹی ایم ایل اور جی ٹی؛
  & lt؛ سر اور جی ٹی؛
  & lt؛ میٹا چارسیٹ = 'UTF-8' / & GT؛
  & lt؛ عنوان اور GT؛ ایچ ٹی ایم ایل کینوس ڈیمو اور ایل ٹی؛ / عنوان اور جی ٹی؛
  & lt؛ لنک ریل = 'stylesheet' href = 'custom.css' / & gt؛
  & lt؛ سکرپٹ SRC = "cancon.js" & gt؛ & lt؛ / script & gt؛
  & lt؛ / سر اور جی ٹی؛
  & lt؛ جسم اور جی ٹی؛
  & lt؛ کینوس کی شناخت = "ایچ ٹی ایم ایل-کینوس" اور جی ٹی؛
  & lt؛ / جسم اور جی ٹی؛
& lt؛ / ایچ ٹی ایم ایل اور جی ٹی؛

02. کینوس کی پیمائش

ہمیں اس کے ساتھ کھیلنے کے لئے کافی جگہ دینے کے لئے، ہم چاہتے ہیں کہ ہمارے کینوس کو پوری سکرین کو بھرنے کے لئے. ہم یہ ایک سیاہ پس منظر بھی دے گا تاکہ آپ جانتے ہو کہ یہ یقینی طور پر وہاں ہے. سکرال سلاخوں یا سفید جگہ کے بغیر ختم ہونے کے بغیر یہ اصل میں تھوڑا سا مشکل ہوسکتا ہے. ذیل میں سی ایس ایس اس کا خیال رکھنا چاہئے. 

 کینوس {
  اونچائی: 100vh؛
  چوڑائی: 100VW؛
  پوزیشن: مطلق؛
  پس منظر کا رنگ: # 000000؛
}
  مارجن: 0؛
  پڈنگنگ: 0؛
}

03. استعمال کے لئے کینوس کو شروع کریں

اگلا ہمیں استعمال کرنے کے لئے تیار کینوس قائم کرنے کے لئے کچھ جاوا اسکرپٹ کو شامل کرنے کی ضرورت ہے. ہمارے پاس یہ ایک ڈومیکنٹینٹلوڈ ایونٹ سے ہک لگے گا تاکہ اس بات کا یقین کرنے کے لئے کہ سکرپٹ کینوس کے عنصر تیار ہونے سے پہلے اسکرپٹ کو چلانے کی کوشش نہیں کرتا. ہم اس علاقے میں اس علاقے سے ملنے کے لئے کینوس کے حل کو بھی مقرر کریں گے - دوسری صورت میں کینوس کو بڑھتی ہوئی قرارداد کے بغیر، بلوریری یا pixellated گرافکس کی قیادت کی جائے گی. 

 ​​دستاویز. Addeventlistener ("domcontentloaded"، فنکشن () {
  وار کینوس = دستاویز
  وار حلقوں = []؛
  Var Radius = 50؛
  canuany.width = cance.clientwidth؛
  کینوس. ہائٹ = کینوس. کلائنٹائٹ؛
  var context = cance.getcontext ("2D")؛
}، غلط)؛

04. ایک شکل ڈرا

آپ کو یہ محسوس ہوگا کہ آخری مرحلے میں، ہم نے 'سیاق و سباق' کہا جاتا ہے. یہ کس طرح کینوس پر ڈرائنگ ہوتا ہے. اس سلسلے میں ایک پینٹ برش کے طور پر سوچنے کے بارے میں سوچنے کے لئے یہ سب سے آسان ہے کہ ہم مختلف لائنوں، آرکیز اور بنیادی سائز کو اپنی طرف متوجہ کرنے کے لئے استعمال کرسکتے ہیں.

اب ہم کیا کر سکتے ہیں ہمارا سیاق و سباق ایک ڈراپراکل فنکشن لکھنے کی طرف سے استعمال کرنے کے لئے استعمال کیا جاتا ہے جو 360 ڈگری آرک تخلیق کرے گا - یہ ایک حلقہ ہے. ہم اس سلسلے میں ایک آرک کی وضاحت کرنے کے لئے سیاق و سباق کو بتاتے ہیں، سرحد کے لئے مقرر کردہ شیلیوں اور بھرتے ہیں، پھر بھریں () اور اسٹروک () فیکٹریوں کو اصل میں شکل ڈالنے کے لئے (اسٹروک سرحد کو ڈرا). 

 ​​فنکشن درکار (x، y، radius، سرحد، سرحد_ کولور، fill_colour)
  {
  context.beginpath ()؛
  Context.arc (X، Y، Radius، 0،2 * ریاضی)؛
  context.strokestyle = border_colour؛
  contextex.fillstyle = fill_colour؛
  context.linewidth = سرحد؛
  context.closepath ()؛
  context.fill ()؛
  contexter.stroke ()؛
  }

05. بہت سے حلقوں کو بنائیں

زبردست. ہمارے پاس ایک فنکشن ہے جو حلقوں کو اپنی طرف متوجہ کرسکتے ہیں. اب ہمیں کچھ کرنے کی ضرورت ہے. آئیے سرٹیفکیٹ کی وضاحت کرنے کے لئے مرحلہ 3 سے کوڈ 3 سے توسیع کریں. یہ ہر دائرے کے ایکس اور Y کوآرڈیٹس، رنگ اور ایک سمت کی قیمت کو ذخیرہ کرے گا.

ہم اس صف کی ساخت کو براہ راست ڈرائنگ کے بجائے براہ راست ڈرائنگ کے بجائے بناتے ہیں کیونکہ یہ ہمیں حلقوں کو متحرک کرنے کے قابل بنائے گا. 

 ​​کے لئے (var i = 0؛ i & lt؛ 20؛ i ++) {
  var x = radius + (ریاضی. رینڈوم () * (کینوس. موڈ - (2 * ریڈیو))؛
  var y = radius + (ریاضی. رینڈوم () * (کینوس. ہائٹ - (2 * ریڈیو))؛
  وار رنگ = رینڈم کولورٹ ()؛
  وار سمت = ریاضی. رینڈوم () * 2.0 * ریاضی؛
  حلقوں. push ({x: x، y: y، رنگین: رنگ، سمت: سمت})؛
  ڈرا ()؛ }

06. رنگ بے ترتیب

آخری مرحلے میں، ہم نے ایک نئے کاموں کا استعمال کیا ہے جو ابھی تک وضاحت نہیں کی گئی ہے. چلو بے ترتیب رنگ کے ساتھ شروع کریں (). یہ ایک افادیت کی تقریب ہو گی جس میں ایک رنگ کی نمائندگی کرنے والے بے ترتیب ہییکسڈیکیمل سٹرنگ واپس آتی ہے. لاگو کرنے کے لئے یہ کافی براہ راست ہے. 

 ​​فنکشن بے ترتیب () {
  وار چارس = '0123456789ABCDEF'؛
  وار رنگ = '#'؛
  کے لئے (var i = 0؛ i & lt؛ 6؛ i ++) {
  رنگ + = چارس [ریاضی. فلور (ریاضی. رینڈوم () * 16)]؛
  }
  رنگ واپس لو }

07. صفحے پر گرافکس ڈرائیو

اب ہم ڈرائیو () تقریب کو لاگو کرکے چیزوں کو مل کر لانے کے لئے تیار ہیں. یہ دو اہم چیزیں کریں گے. سب سے پہلے، یہ Cleartrect () تقریب کا استعمال کرتے ہوئے کینوس کو صاف کرے گا. یہ اہم ہو گا جب ہم اپنے حلقوں کو متحرک کرنے کے لئے آتے ہیں، پرانے کے سب سے اوپر پر نئے فریم کو ڈرائنگ سے بچنے کے لۓ. اس کے بعد ہم نے اس صف کے ذریعہ ہمارا تعمیر کیا اور ہماری ڈراپرا کام کا استعمال کرتے ہوئے کینوس پر ہر دائرے کو اپنی طرف متوجہ کیا. 

 ​​فنکشن ڈرا () {
  context.clearrect (0، 0، کینوس. width، کینوس. hight)؛
  حلقوں. فورچ (تقریب (سرکل) {
  drawcircle (سرکل. x، sturce.y، radius، 5، scriver.cour، دائرے. colorour)؛
    })؛ }

08. سائز کو متحرک کریں

اگر آپ اب اس کی کوشش کرتے ہیں، تو آپ دیکھیں گے کہ کچھ جامد حلقوں کو صفحے پر پینٹ مل جائے گا. لیکن ہم ان کو متحرک کرنا چاہتے ہیں. ایسا کرنے کے لئے، ہمیں ایک جوڑے کے طریقوں میں ہماری ڈرا () تقریب کو بڑھانے کی ضرورت ہے. سب سے پہلے، ہم دائرے کے لئے ایکس اور Y پوزیشن میں تبدیلیوں کا حساب کرنے کے لئے ہم سرکل. ڈائرکٹری قیمت کا استعمال کریں گے.

اگلا، ہم ایک بلٹ ان فنکشن کا استعمال کریں گے جو درخواست ناممکن فریم کہتے ہیں کہ دوبارہ پڑھنے والے () کی تقریب کو دوبارہ کال کریں. درخواست ناممکن فریم براؤزر کو اس بات کا فیصلہ کرنے کی اجازت دیتا ہے کہ جب کام دوبارہ کال کریں، اگلے فریم کو اپنی طرف متوجہ کرنے کے لئے ٹائمرز کو لاگو کرنے کی ضرورت سے بچنے کی ضرورت ہے. 

 ​​فنکشن ڈرا () {
  context.clearrect (0، 0، کینوس. width، کینوس. hight)؛
  حلقوں. فورچ (تقریب (سرکل) {
  Circle.x = سرکل. x + math.cos (سرکل. ڈائرکٹری)؛
  سرکل .Y = سرکل. + ریاضی (سرکل. ڈائرکٹری)؛
  drawcircle (سرکل. x، sturce.y، radius، 5، scriver.cour، دائرے. colorour)؛
  })؛
  درخواست ناممکن فریم (ڈرا)؛
  }

09. صفحے کے کنارے پر اچھال

اگرچہ اب بھی ایک چیز غائب ہے. حلقوں اب صرف اسکرین کے کنارے سے غائب ہو جاتے ہیں. چلو انہیں واپس اچھال دیتے ہیں. ایسا کرنے کے لئے، ہم ایک نئی تقریب، اچھال (دائرے)، ڈراپ () تقریب کے فورچ کے اندر اندر کال کریں گے.

اچھال فنکشن اس بات کا تعین کرے گا جب ایک حلقہ اسکرین کے کنارے پر ہے، اور مناسب طریقے سے اس کی سمت کی قیمت کو ایڈجسٹ کریں. 

 ​​فنکشن اچھال (سرکل) {
  اگر ((((viver.x - ریڈس) & lt؛ 0) || ((سرکل .ی - ریڈیو) & lt؛ 0) || ((سرکل. x + radius) & gt؛ canuans.width) || ((سرکل. y + radius) & gt؛ کینوس. hight)) {
  سرکل. ڈائرکٹری + = (ریاضی. پی آئی / 2)؛
  }
  اگر (سرکل. ڈائرکٹری اور جی ٹی؛ (2 * ریاضی)) {
  سرکل. ڈائرکٹری - = (2 * ریاضی)؛
  }
}

یہ مضمون اصل میں شائع ہوا ویب ڈیزائنر مسئلہ 266. اسے یہاں خریدیں.

متعلقہ مضامین:

  • کینوس کا استعمال کرتے ہوئے ایک ڈیجیٹل ایٹچ ایک خاکہ بنائیں
  • آپ کو نئے نوڈ. جے 8 کے بارے میں جاننے کی ضرورت ہے
  • HTML5 پر اثرات متحرک تصاویر کے بعد برآمد کیسے کریں

کيسے - انتہائی مشہور مضامین

مایا کے لئے Renderman کے ساتھ ایک منظر بنائیں

کيسے Sep 11, 2025

(تصویری کریڈٹ: جیریمی Heintz) مایا ٹیوٹوریل کے لئے اس Renderman میں، ہم م�..

پرنٹ کے لئے ایک فائل تیار کرنے کے لئے

کيسے Sep 11, 2025

ایک آرٹ ورکر کے طور پر ویڈین + کینیڈی لندن، میں پرنٹ کے لئے �..

PixiJs کے ساتھ ریپ اثرات بنائیں

کيسے Sep 11, 2025

بہت سے دلچسپ اثرات ہیں جو مصروفیت کو بڑھانے کے لئے صفحے میں شامل کیا جا �..

رکن کے لئے انفینٹی تصویر کے ساتھ کیسے ڈراؤ

کيسے Sep 11, 2025

رکن کے لئے انفینٹی تصویر ایک عظیم ہے تصویر ایڈیٹر ، لیکن ..

تیل میں ایک متحرک سیوسکپ پینٹ

کيسے Sep 11, 2025

مواد سارہ پینٹ..

کوکولر میں مکمل صفحہ کی ویب سائٹ کی تعمیر کیسے کریں

کيسے Sep 11, 2025

صفحہ 1 کا 4: صفحہ 1 صفحہ 1 صفحہ 2. صفحہ 3. ..

ویب کے لئے سادہ عکاسی بنائیں

کيسے Sep 11, 2025

میں بیٹھ گیا، کچھ موسیقی، بتیوں کو ڈیمڈ کیا اور اپنے لیپ ٹاپ کھول دیا. م�..

گیم پلے ڈیزائن کے لئے ایک جہاز کا ماڈلنگ

کيسے Sep 11, 2025

کے ساتھ خالی جگہ یہ کیا ہے کہ یہ کیا ہے - ایک مفت کھیل ٹیم کے جنگی..

اقسام