首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在HTML5画布上绘制多边形?

如何在HTML5画布上绘制多边形?
EN

Stack Overflow用户
提问于 2011-01-30 06:59:31
回答 10查看 187.2K关注 0票数 106

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

EN

回答 10

Stack Overflow用户

回答已采纳

发布于 2011-01-30 07:03:32

使用moveTolineTo (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();
票数 181
EN

Stack Overflow用户

发布于 2012-07-06 09:43:17

来自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>

票数 43
EN

Stack Overflow用户

发布于 2011-01-30 11:56:56

//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();
票数 37
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/4839993

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档