1 回答
TA贡献1812条经验 获得超5个赞
我会尝试创建一个绘制六边形的函数,这样您就不必使用翻译。
见下文
c = document.getElementById("canvas");
context = c.getContext("2d");
function hexagon(x, y, r, color) {
context.beginPath();
var angle = 0
for (var j = 0; j < 6; j++) {
var a = angle * Math.PI / 180
var xd = r * Math.sin(a)
var yd = r * Math.cos(a)
context.lineTo(x + xd, y + yd);
angle += 360 / 6
}
context.fillStyle = color;
context.fill();
}
hexagon(50, 50, 30, "red")
hexagon(40, 40, 10, "blue")
hexagon(60, 60, 10, "lime")
<canvas id=canvas >
这是一个细分function hexagon(x, y, r, color)
它以六边形 (
x,y
) 为中心、半径 (r
) 和颜色我们遍历六个顶点并绘制线条
计算只是一点三角函数,没什么特别的
这样我们就可以在任何我们想要的位置绘制六边形。
您可以轻松地重构相同的函数来绘制八边形或其他多边形。
这是这些六边形的动画版本
c = document.getElementById("canvas");
context = c.getContext("2d");
delta = 0
function hexagon(x, y, r, color) {
context.beginPath();
var angle = 0
for (var j = 0; j < 6; j++) {
var a = angle * Math.PI / 180
var xd = r * Math.sin(a)
var yd = r * Math.cos(a)
context.lineTo(x + xd, y + yd);
angle += 360 / 6
}
context.fillStyle = color;
context.fill();
}
function draw() {
context.clearRect(0, 0, c.width, c.height)
var xd = 10 * Math.sin(delta)
var yd = 10 * Math.cos(delta)
hexagon(50 - xd, 50 - yd, 30, "red")
hexagon(40 + xd, 40 + yd, 10, "blue")
delta += 0.2
}
setInterval(draw, 100);
<canvas id=canvas>
正如你所看到的,不需要使用翻译
- 1 回答
- 0 关注
- 84 浏览
添加回答
举报