html图片多边形怎么写,javascript - 如何在HTML5画布上绘制多边形？

javascript - 如何在HTML5画布上绘制多边形？

我需要知道如何在画布上绘制多边形。 不使用jQuery或类似的东西。

9个解决方案

137 votes

创建一个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();

phihag answered 2019-06-21T12:21:08Z

31 votes

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

canvastag answered 2019-06-21T12:21:25Z

25 votes

来自[http://www.scienceprimer.com/drawing-regular-polygons-javascript-canvas：]

以下代码将绘制六边形。 更改边数以创建不同的正多边形。

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

Andrew Staroscik answered 2019-06-21T12:21:58Z

8 votes

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

Jignesh Variya answered 2019-06-21T12:22:16Z

3 votes

这是一个甚至支持顺时针/逆时针绘图的功能，您可以使用非零缠绕规则控制填充。

这是一篇关于它如何工作的完整文章。

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

John R answered 2019-06-21T12:22:53Z

1 votes

您可以使用与以下相同的lineTo()方法：  var objctx = canvas.getContext(＆＃39; 2d＆＃39;);

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/]

谢谢

ankur answered 2019-06-21T12:23:39Z

1 votes

除了@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();

Koen. answered 2019-06-21T12:24:07Z

0 votes

要制作一个简单的六边形而不需要循环，只需使用beginPath()函数即可。 确保你的canvas.getContext(＆＃39; 2d＆＃39;)等于ctx，否则它将无效。

我还想添加一个名为times的变量，如果需要的话我可以使用它来缩放对象。这就是我不需要更改每个数字。

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

Sabba Keynejad answered 2019-06-21T12:24:43Z

0 votes

对于寻找正多边形的人：

function regPolyPath(r,p,ctx){ //Radius, #points, context

//Azurethi was here!

ctx.moveTo(r,0);

for(i=0; 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();

Azurethi answered 2019-06-21T12:25:11Z