在画布上绘制多边形时的间隙
Gap when drawing polygon on canvas
我使用以下内容在html画布上绘制多边形:
var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");
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 = 10;
ctx.stroke();
不幸的是,它在多边形的末端留下了一个间隙。知道怎么解决这个问题吗?
Jsfidle here
不要画到所有6点,只画到前5点,然后调用ctx.closePath();
http://jsfiddle.net/757mavjb/2/
var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");
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.closePath();
ctx.strokeStyle = "#000000";
ctx.lineWidth = 10;
ctx.stroke();
(注意从i <= numberOfSides
到i < numberOfSides
的变化)
尝试再画一面来填补空白:
for (var i = 1; i <= numberOfSides+1;i += 1) {
ctx.lineTo (Xcenter + size * Math.cos(i * 2 * Math.PI / numberOfSides), Ycenter + size * Math.sin(i * 2 * Math.PI / numberOfSides));
}
相关文章:
- 使用电话间隙在Android应用程序中显示SQL Lite的数据
- SVG/JavaScript:尝试选择和更改多边形点
- 如何获取谷歌地图多边形的当前fillColor
- 如何在OpenLayers中获取动态绘制的多边形的坐标
- 使用Google Maps API驱动时间多边形
- Matlab点在多边形中
- 如何使所有绘制的(矩形、圆形、直线、多边形)都可拖动?纯JS
- 如何在fabric js中向多边形添加图像
- 使用css跨浏览器动态剪切多边形
- fabric js多边形集合坐标
- 从传单数据到GeoJSON的多边形
- 我们可以为Cesium中使用CZML绘制的多边形设置outlineWidth属性吗
- 如何在pixi.js多边形上放置纹理
- iScroll不断向上滚动(电话间隙)
- 在谷歌地图V3上选择多边形
- 如何在鼠标单击时更改KML多边形的颜色
- 谷歌地图多边形减慢浏览器速度
- 精灵从pixi到p2的边界多边形
- d3js/没有固定坐标的多边形
- 在画布上绘制多边形时的间隙