Comment dessiner des polygones sur un canevas HTML5?

Question

J'ai besoin de savoir dessiner des polygones sur une toile. Sans utiliser jQuery ou quelque chose comme ça.

Answer 1

créer un chemin avec moveTo et lineTo (live demo):

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(); 

Answer 2

//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(); 

Answer 3

de http://www.scienceprimer.com/drawing-regular-polygons-javascript-canvas:

le code suivant dessiner un hexagone. Changez le nombre de côtés pour créer différents polygones réguliers. méthode

// hexagon 
var numberOfSides = 6, 
    size = 20, 
    Xcenter = 25, 
    Ycenter = 25; 

cxt.beginPath(); 
cxt.moveTo (Xcenter + size * Math.cos(0), Ycenter + size * Math.sin(0));   

for (var i = 1; i <= numberOfSides;i += 1) { 
    cxt.lineTo (Xcenter + size * Math.cos(i * 2 * Math.PI/numberOfSides), Ycenter + size * Math.sin(i * 2 * Math.PI/numberOfSides)); 
} 

cxt.strokeStyle = "#000000"; 
cxt.lineWidth = 1; 
cxt.stroke(); 

Answer 4

Vous pouvez utiliser le lineTo() même que: 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(); 

si vous voulez ne pas remplir le polygone utiliser la méthode course() au lieu de remplissage()

Vous pouvez également vérifier les points suivants: http://www.authorcode.com/draw-and-fill-a-polygon-and-triangle-in-html5/

grâce

Answer 5

//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'); 

Answer 6

Voici une fonction qui prend même en charge le dessin dans le sens horaire/anti-horaire que vous contrôlez avec la règle d'enroulement non nulle.

Here is a full article on how it works and more.

// 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(); 

Answer 7

En plus de @canvastag, utilisez une boucle while avec shift je pense est plus concis:

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(); 

Answer 8

Pour faire un hexagone simple, sans la nécessité d'une boucle, Just utilisez la fonction beginPath(). Assurez-vous que votre canvas.getContext ('2d') est l'équivalent de ctx sinon il ne fonctionnera pas. J'aime aussi ajouter une variable appelée temps que je peux utiliser pour mettre à l'échelle l'objet si nécessaire. Ce que je n'ai pas besoin de changer chaque nombre.

 // 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();