কম্পিউটার টিউটোরিয়াল

HTML5 ক্যানভাসে বেজিয়ার কার্ভ আঁকা

হ্যাঁ, HTML5-এ বেজিয়ার কার্ভ আঁকতে HTML ক্যানভাস bezierCurveTo() মেথড ব্যবহার করুন।

উদাহরণ

ক্যানভাসে বেজিয়ার কার্ভ আঁকতে নিচের কোডটি চালান:

 <!DOCTYPE HTML> <html>    <head>       <style>          #test {             width: 100px;             height:100px;             margin: 0px auto;          }       </style>       <script>          function drawShape(){             // DOM ব্যবহার করে ক্যানভাস এলিমেন্ট পান             var canvas = document.getElementById('mycanvas');             // নিশ্চিত করুন যে ক্যানভাস সমর্থিত না হলে এক্সিকিউট করা হয় না             if (canvas.getContext){                // getContext ব্যবহার করে ক্যানভাসে আঁকুন                var ctx = canvas.getContext('2d');                ctx.beginPath();                ctx.moveTo(75,40);                ctx.bezierCurveTo(75,37,70,25,50,25);                ctx.bezierCurveTo(20,25,20,62.5,20,62.5);                ctx.bezierCurveTo(20,80,40,102,75,120);                ctx.bezierCurveTo(110,102,130,80,130,62.5);                ctx.bezierCurveTo(130,62.5,130,25,100,25);                ctx.bezierCurveTo(85,25,75,37,75,40);                ctx.fill();             } else {                alert('You need Safari or Firefox 1.5+ to see this demo.');             }          }       </script>    </head>    <body id = "test" onload = "drawShape();">       <canvas id = "mycanvas"></canvas>    </body> </html>

আউটপুট

HTML5 ক্যানভাসে বেজিয়ার কার্ভ আঁকা


  1. HTML5 Canvas-এ আয়তক্ষেত্র কীভাবে আঁকবেন?

  2. HTML5 Canvas-এ তারকা কীভাবে আঁকবেন?

  3. HTML5 Canvas-এ ইমেজ কীভাবে ব্যবহার করবেন?

  4. HTML Canvas দিয়ে বেজিয়ার কার্ভ আঁকা