जवाबों:
के साथ एक पथ बनाएँ 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.scienceprimer.com/drawing-regular-polygons-javascript-canvas :
निम्नलिखित कोड एक षट्भुज आकर्षित करेगा। विभिन्न नियमित बहुभुज बनाने के लिए पक्षों की संख्या बदलें।
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 = कैनवास.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/
धन्यवाद
@Canvastag के अलावा, एक 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();लूप की आवश्यकता के बिना एक साधारण षट्भुज बनाने के लिए, बस शुरुआतपथ () फ़ंक्शन का उपयोग करें। सुनिश्चित करें कि आपका कैनवस .getContext ('2d') ctx के बराबर है यदि यह काम नहीं करेगा।
मुझे एक चर भी कहा जाता है जिसे मैं उस पैमाने को जोड़ने के लिए उपयोग कर सकता हूं यदि मुझे आवश्यकता है तो मुझे प्रत्येक नंबर को बदलने की आवश्यकता नहीं है।
// 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();