Question

我试图一起创建六个三角形以形成六边形，然后旋转它们。我成功创建了一个切片的六边形，我能够旋转它，但我希望每个切片都能单独表现（例如，如果一个对象击中一个切片，它的大小应该缩小，另一个应保持相同的大小）。以下是我在画布上成功运行的代码。有人可以帮我绘制单独的三角形和单独的引用，以便我可以根据需要修改它们。我正在计划使用“lineTo”使三角形看起来更小或更大，以绘制所需尺寸，然后填充它们。如果有另一种方法可以实现这一点，请告诉我。非常感谢。

var a = [1, 2, 3];
a.splice(0, 1); // a is [2, 3] after this statement

Answer 1

一种方法是创建一个Slice类并将绘制函数移动到此类中。现在，您为每个切片创建一个new Slice(...)对象/实例（slices[0].setColor('red')），您可以单独设置样式（ctx.rotate）。请参阅下面的代码段。

我建议通过创建具有相同坐标的切片并通过var Slice = function(Xcenter, Ycenter, size, number, numberOfSides) { this.scale = 1.0; this.color = 'blue'; this.pos = []; this.pos.push({x:Xcenter, y:Ycenter}); this.pos.push({ x:Xcenter + size * Math.cos((number+1) * 2 * Math.PI / numberOfSides), y:Ycenter + size * Math.sin((number+1) * 2 * Math.PI / numberOfSides) }); this.pos.push({ x: Xcenter + size * Math.cos(number * 2 * Math.PI / numberOfSides), y: Ycenter + size * Math.sin(number * 2 * Math.PI / numberOfSides) }); }; Slice.prototype.setScale = function(scale) { this.scale = scale; }; Slice.prototype.setColor = function(color) { this.color = color; }; Slice.prototype.draw = function(ctx) { ctx.save(); ctx.scale(this.scale,this.scale); ctx.beginPath(); for (var i=0; i<this.pos.length; i++) { ctx.lineTo(this.pos[i].x, this.pos[i].y); } ctx.closePath(); ctx.fillStyle = this.color; ctx.fill(); ctx.stroke(); ctx.restore(); }; function ready() { var canvas=document.getElementById("myCanvas"); var ctx=canvas.getContext("2d"); var numberOfSides = 6, size = 100, Xcenter = 0, Ycenter = 0, prevX, prevY, startPX, startPY, angle = 0.1, angleChange=Math.PI/180; var slices = []; for (var i = 1; i <= numberOfSides;i += 1) { slices.push(new Slice(Xcenter, Ycenter, size, i, numberOfSides)); } slices[0].setScale(0.9); slices[0].setColor('red'); requestAnimationFrame(animate); function animate(time){ requestAnimationFrame(animate); ctx.clearRect(0,0,canvas.width,canvas.height); ctx.save(); // translate and rotate the canvas ctx.translate(canvas.width/2,canvas.height/2); ctx.rotate(angle); for (var i = 1; i <= numberOfSides;i += 1) { slices[i-1].draw(ctx); } // restore the context to its untranslated & unrotated state ctx.restore(); angle+=angleChange; } ctx.closePath(); ctx.strokeStyle = "#ffffff"; ctx.lineWidth = 1; ctx.stroke(); }将切片旋转到正确的位置来改进下面的示例。

＆＃13;

<body onload="ready();">
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;"></canvas>
</body>

＆＃13;

for($i = 7; $i <= 9; $i++){
    for($j = 1; $j <= 3; $j++){
        $result = $i * $j;
        echo $j." * ".$i." = ".$result."<br>";
    }
}

＆＃13;

在javascript画布上旋转单个三角形

1 个答案: