TechBlogSD - ওয়ার্ডপ্রেস এবং ওয়েব ডেভেলপমেন্টের জন্য সবকিছু
ওয়েব এবং ওয়ার্ডপ্রেস নির্দেশাবলী, খবর, থিম এবং প্লাগইনগুলির পর্যালোচনা

কিভাবে HTML5 ক্যানভাস দিয়ে এনালগ ঘড়ি তৈরি করবেন?

1

HTML5 ক্যানভাস উপাদানটি জাভাস্ক্রিপ্ট দিয়ে আঁকা গ্রাফিক্স ধারণ করতে ব্যবহৃত হয়। ক্যানভাস ট্যাগ শুধুমাত্র উপাদানটিকে স্থানধারক বা ধারক হিসেবে ধরে রাখার জন্য ব্যবহৃত হয়। আসল গ্রাফিক্স জাভাস্ক্রিপ্ট দিয়ে আঁকা হয়। এই নিবন্ধে আমরা জাভাস্ক্রিপ্ট ব্যবহার করে একটি সাধারণ অ্যানালগ ঘড়ি আঁকব এবং ক্যানভাস পাত্রে একটি পৃষ্ঠায় রাখব।

সম্পর্কিত: কিভাবে CSS দিয়ে একটি ঘূর্ণমান কিউব উইজেট তৈরি করবেন?

HTML5 ক্যানভাস এবং জাভাস্ক্রিপ্ট সহ এনালগ ঘড়ি

এটি ঘন্টা, মিনিট এবং সেকেন্ড পয়েন্টার সহ একটি সাধারণ ঘড়ি উইজেট। আপনার কম্পিউটারের সময় অনুযায়ী সময় শুরু হবে যখন উইজেট লোড হবে। ঘড়িটি কেমন হবে তার একটি ডেমো এখানে:

এনালগ ক্লক উইজেটের দুটি অংশ আছে – জাভাস্ক্রিপ্ট এবং ক্যানভাস কন্টেইনার।

অ্যানালগ ঘড়ির জন্য জাভাস্ক্রিপ্ট

জাভাস্ক্রিপ্ট নিচের মত একটি বৃত্ত, পয়েন্টার, ঘড়ির সময় এবং পয়েন্টার মুভমেন্ট তৈরিতে ব্যবহৃত হয়। পয়েন্টারের যথাযথভাবে ঘোরানোর জন্য বৃত্তের 360 ডিগ্রী ভাগ করার জন্য গাণিতিক গণনা ব্যবহার করা হয়।

<script type="text/JavaScript"> x=150; y=150; clock=document.getElementById("canvas"); ctx=clock.getContext("2d"); function loop() { time=new Date(); h=time.getHours(); m=time.getMinutes(); s=time.getSeconds(); ctx.beginPath(); ctx.fillStyle="white"; ctx.arc(x,y,140,0,Math.PI*2,true); ctx.fill(); ctx.strokeStyle="red"; ctx.lineWidth=10; ctx.stroke(); drawNumber(); drawPointer(360*(h/12)+(m/60)*30-90,70,"black",10); drawPointer(360*(m/60)+(s/60)*6-90,100,"black",10); drawPointer(360*(s/60)+x-90,120,"red",2); } function drawNumber() { for(n=0;n<12;n++) { d=-60; num = new Number(n+1); str = num.toString(); dd = Math.PI/180*(d+n*30); tx = Math.cos(dd)*120+140; ty = Math.sin(dd)*120+160; ctx.font = "26px Verdana"; ctx.fillStyle = "brown"; ctx.fillText(str, tx, ty); } } function drawPointer(deg,len,color,w) { rad=(Math.PI/180*deg); x1=x+Math.cos(rad)*len; y1=y+Math.sin(rad)*len; ctx.beginPath(); ctx.strokeStyle=color; ctx.lineWidth=w; ctx.moveTo(x,y); ctx.lineTo(x1,y1); ctx.stroke(); } setInterval(loop,500); </script>

আপনি এই স্ক্রিপ্টটি কোডে দেওয়া ট্যাগ সহ পেজে ব্যবহার করতে পারেন। অন্যথায় একটি .js ফাইল তৈরি করুন এবং স্ক্রিপ্ট ট্যাগ ছাড়া বিষয়বস্তু যোগ করুন এবং <script src = "script.js"> কোড ব্যবহার করে পৃষ্ঠার পাদলেখ বিভাগে স্ক্রিপ্ট ফাইলটি লিঙ্ক করুন।

এনালগ ঘড়ির জন্য এইচটিএমএল

ক্যানভাস কন্টেইনার তৈরির জন্য এনালগ ঘড়ির নিচে HTML দেওয়া হল। আপনি এই কোডটি আপনার পৃষ্ঠার যে কোন জায়গায় পেস্ট করতে পারেন।

<center> <canvas id="canvas" width="300" height="300"></canvas> </center>

উইজেট কাস্টমাইজ করা

এনালগ ঘড়িটি নিম্নলিখিত বিকল্পগুলির সাথে কাস্টমাইজ করা যায়:

  • DrawPointer ফাংশন ব্যবহার করে সংজ্ঞায়িত কোন প্রয়োজনীয় মান থেকে ঘন্টা, মিনিট এবং সেকেন্ড পয়েন্টার রঙ এবং দৈর্ঘ্য পরিবর্তন করুন।
  • "Ctx.font =" 26px Verdana ";" দিয়ে সংজ্ঞায়িত সংখ্যার আকার এবং ফন্ট পরিবর্তন করুন।
  • ঘড়ির ভেতরের সংখ্যার রঙকে "ctx.fillStyle =" বাদামী "ব্যবহার করে বাদামী হিসাবে সংজ্ঞায়িত করা হয়; যা যেকোনো রঙে পরিবর্তন করা যায়।

রেকর্ডিং উত্স: webnots.com
Leave A Reply

এই ওয়েবসাইট আপনার অভিজ্ঞতা উন্নত করতে কুকি ব্যবহার করে। আমরা ধরে নেব যে আপনি এটির সাথে ঠিক আছেন, তবে আপনি ইচ্ছা করলে অপ্ট-আউট করতে পারেন। আমি স্বীকার করছি আরো বিস্তারিত