ক্যানভাসে বহুভুজগুলি কীভাবে আঁকতে হবে তা আমার জানতে হবে। JQuery বা এর মতো কিছু ব্যবহার না করে।
উত্তর:
moveToএবং lineTo( লাইভ ডেমো ) দিয়ে একটি পথ তৈরি করুন :
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(100,50);
ctx.lineTo(50, 100);
ctx.lineTo(0, 90);
ctx.closePath();
ctx.fill();
http : //www.sज्ञानprimer.com/drawing-regular-polygons- জাভাস্ক্রিপ্ট- ক্যানভাস থেকে :
নিম্নলিখিত কোডটি একটি ষড়ভুজ আঁকবে। বিভিন্ন নিয়মিত বহুভুজ তৈরি করতে পার্শ্বের সংখ্যা পরিবর্তন করুন।
var ctx = document.getElementById('hexagon').getContext('2d');
// hexagon
var numberOfSides = 6,
size = 20,
Xcenter = 25,
Ycenter = 25;
ctx.beginPath();
ctx.moveTo (Xcenter + size * Math.cos(0), Ycenter + size * Math.sin(0));
for (var i = 1; i <= numberOfSides;i += 1) {
ctx.lineTo (Xcenter + size * Math.cos(i * 2 * Math.PI / numberOfSides), Ycenter + size * Math.sin(i * 2 * Math.PI / numberOfSides));
}
ctx.strokeStyle = "#000000";
ctx.lineWidth = 1;
ctx.stroke();#hexagon { border: thin dashed red; }<canvas id="hexagon"></canvas>cxt.save(); cxt.fillStyle = "#FF000"; cxt.fill(); cxt.restore(); আপনি আকৃতিটি পূরণ করতে পারেন।
var angle = i * 2 * Math.PI / shape.currentSides + rotation
sinএবং cosকল ও পরিবর্তন Ycenter +করার Ycenter -(উভয় জায়গা মূল্যবোধের পার্থক্য বদলে একটি সমষ্টি হিসাবে এটা দিয়া ফলাফল ফলাফল আকারের নীচে একটি পয়েন্ট দিয়ে শুরু)। ট্রিগার করার সময় আমি কোনও চালাক মানুষ নই, সুতরাং নুনের দানা নিয়ে নিয়ে যাও; তবে এটি আমি যা চেয়েছিলাম তা অর্জন করেছে।
//poly [x,y, x,y, x,y.....];
var poly=[ 5,5, 100,50, 50,100, 10,90 ];
var canvas=document.getElementById("canvas")
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.beginPath();
ctx.moveTo(poly[0], poly[1]);
for( item=2 ; item < poly.length-1 ; item+=2 ){ctx.lineTo( poly[item] , poly[item+1] )}
ctx.closePath();
ctx.fill();
forপদ্ধতিটি মৌলিকভাবে বুঝতে পারি । কোডের এক লাইন জিনিসগুলিকে এত সহজ করে দিয়েছে। আমি সাধারণত jQuery ব্যবহার করি .each()তবে এর অ্যাপ্লিকেশনটি অনেক কম বহুমুখী।
var, উপরের itemকোডটিতে বৈশ্বিক নেমস্পেস দূষণকারী। সবকিছু এক লাইনে রয়েছে, যা পাঠযোগ্যতা হ্রাস করে। আপনি যদি পঠনযোগ্যতার বিষয়ে চিন্তা না করেন তবে আপনি পাশাপাশি কোঁকড়ানো বন্ধনীগুলি মুছে ফেলতে পারেন।
//create and fill polygon
CanvasRenderingContext2D.prototype.fillPolygon = function (pointsArray, fillColor, strokeColor) {
if (pointsArray.length <= 0) return;
this.moveTo(pointsArray[0][0], pointsArray[0][1]);
for (var i = 0; i < pointsArray.length; i++) {
this.lineTo(pointsArray[i][0], pointsArray[i][1]);
}
if (strokeColor != null && strokeColor != undefined)
this.strokeStyle = strokeColor;
if (fillColor != null && fillColor != undefined) {
this.fillStyle = fillColor;
this.fill();
}
}
//And you can use this method as
var polygonPoints = [[10,100],[20,75],[50,100],[100,100],[10,100]];
context.fillPolygon(polygonPoints, '#F00','#000');
এখানে এমন একটি ফাংশন যা ঘড়ির কাঁটাওয়ালা / অ্যান্টিলিকওয়াইজ অঙ্কনকে সমর্থন করে যা আপনি অ শূন্য-বিহীন নিয়মের সাথে পূরণগুলি নিয়ন্ত্রণ করেন।
এটি কীভাবে কাজ করে এবং আরও অনেক কিছু সম্পর্কে একটি সম্পূর্ণ নিবন্ধ এখানে।
// Defines a path for any regular polygon with the specified number of sides and radius,
// centered on the provide x and y coordinates.
// optional parameters: startAngle and anticlockwise
function polygon(ctx, x, y, radius, sides, startAngle, anticlockwise) {
if (sides < 3) return;
var a = (Math.PI * 2)/sides;
a = anticlockwise?-a:a;
ctx.save();
ctx.translate(x,y);
ctx.rotate(startAngle);
ctx.moveTo(radius,0);
for (var i = 1; i < sides; i++) {
ctx.lineTo(radius*Math.cos(a*i),radius*Math.sin(a*i));
}
ctx.closePath();
ctx.restore();
}
// Example using the function.
// Define a path in the shape of a pentagon and then fill and stroke it.
context.beginPath();
polygon(context,125,125,100,5,-Math.PI/2);
context.fillStyle="rgba(227,11,93,0.75)";
context.fill();
context.stroke();
আপনি লাইনটো () পদ্ধতিটি এর মতোই ব্যবহার করতে পারেন: var objctx = canvas.getContext ('2d');
objctx.beginPath();
objctx.moveTo(75, 50);
objctx.lineTo(175, 50);
objctx.lineTo(200, 75);
objctx.lineTo(175, 100);
objctx.lineTo(75, 100);
objctx.lineTo(50, 75);
objctx.closePath();
objctx.fillStyle = "rgb(200,0,0)";
objctx.fill();
যদি আপনি বহুভুজ পূরণ করতে না চান তবে পূরণের জায়গায় স্ট্রোক () পদ্ধতিটি ব্যবহার করুন ()
আপনি নিম্নলিখিতগুলিও পরীক্ষা করতে পারবেন: http://www.authorcode.com/draw-and-fill-a-polygon-and-triangle-in-html5/
ধন্যবাদ
@ ক্যানভাসট্যাগ ছাড়াও, whileলুপটি shiftআরও সংক্ষিপ্ত বলে মনে করুন:
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var poly = [5, 5, 100, 50, 50, 100, 10, 90];
// copy array
var shape = poly.slice(0);
ctx.fillStyle = '#f00'
ctx.beginPath();
ctx.moveTo(shape.shift(), shape.shift());
while(shape.length) {
ctx.lineTo(shape.shift(), shape.shift());
}
ctx.closePath();
ctx.fill();
লুপের প্রয়োজন ছাড়াই একটি সাধারণ ষড়জাগুলি তৈরি করতে, কেবল সূচনাপথ () ফাংশনটি ব্যবহার করুন। নিশ্চিত করুন যে আপনার করুন canvas.getContext ( '2d') সমান CTX যদি না এটা কাজ করবে না।
আমি বার হিসাবে একটি পরিবর্তনশীল যুক্ত করতে চাই যা আমার প্রয়োজন হলে অবজেক্টটি স্কেল করতে ব্যবহার করতে পারি eachএটি প্রতিটি সংখ্যার পরিবর্তনের দরকার নেই।
// Times Variable
var times = 1;
// Create a shape
ctx.beginPath();
ctx.moveTo(99*times, 0*times);
ctx.lineTo(99*times, 0*times);
ctx.lineTo(198*times, 50*times);
ctx.lineTo(198*times, 148*times);
ctx.lineTo(99*times, 198*times);
ctx.lineTo(99*times, 198*times);
ctx.lineTo(1*times, 148*times);
ctx.lineTo(1*times,57*times);
ctx.closePath();
ctx.clip();
ctx.stroke();
নিয়মিত বহুভুজ খুঁজছেন লোকেদের জন্য:
function regPolyPath(r,p,ctx){ //Radius, #points, context
//Azurethi was here!
ctx.moveTo(r,0);
for(i=0; i<p+1; i++){
ctx.rotate(2*Math.PI/p);
ctx.lineTo(r,0);
}
ctx.rotate(-2*Math.PI/p);
}
ব্যবহার:
//Get canvas Context
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.translate(60,60); //Moves the origin to what is currently 60,60
//ctx.rotate(Rotation); //Use this if you want the whole polygon rotated
regPolyPath(40,6,ctx); //Hexagon with radius 40
//ctx.rotate(-Rotation); //remember to 'un-rotate' (or save and restore)
ctx.stroke();