如何在HTML5canvas上绘制多边形？
我需要知道如何在canvas上绘制多边形。 不使用jQuery或类似的东西。
用moveTo和lineTo创build一个path：
var c2 = canvas.getContext('2d'); c2.fillStyle = '#f00'; c2.beginPath(); c2.moveTo(0, 0); c2.lineTo(100,50); c2.lineTo(50, 100); c2.lineTo(0, 90); c2.closePath(); c2.fill(); 现场演示： http : //jsfiddle.net/yd7Wv/1/
//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();
从http://www.scienceprimer.com/drawing-regular-polygons-javascript-canvas ：
下面的代码将绘制一个六angular形。 更改边的数量以创build不同的正多边形。
// 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();
//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');
这是一个支持顺时针/逆时针绘图的function，您可以控制用非零绕线规则来填充。
这是一个关于如何工作和更多的全文。
// 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();
你可以像下面这样使用lineTo（）方法：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();
如果您不想填充多边形，请在fill（）方法中使用stroke（）方法，
您也可以检查以下内容： http : //www.authorcode.com/draw-and-fill-a-polygon-and-triangle-in-html5/
谢谢
除了@canvastag之外，使用一个while循环，我认为它更简洁：
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();
