我在 html 的畫布上畫了一個六邊形，當我使用翻譯方法時，我想翻譯畫布中的六邊形，它不會翻譯六邊形，但當我翻譯時，當我使用矩形時，它會翻譯。var canvas:HTMLCanvasElement = document.getElementById("myCanvas"); var context:CanvasRenderingContext2D = canvas.getContext("2d");var x = 300;var y = 100;context.beginPath();context.moveTo(x, y);x = x + 120;y = y + 100;context.lineTo(x, y); y = y + 120;context.lineTo(x, y); x = x - 125;y = y + 100;context.lineTo(x, y); x = x - 125;y = y - 100;context.lineTo(x, y); y = y - 120;context.lineTo(x, y); x = x + 130;y = y - 100;context.lineTo(x, y);context.strokeStyle = "red";context.lineWidth = 4; context.fillStyle = "blue";context.fill(); context.translate(400,400);context.fillStyle = "blue";context.fill(); context.save(); context.fillRect(10, 10, 100, 50); context.translate(70, 70); context.fillRect(10, 10, 100, 50);編輯1： 根據@helder給出的答案，我已經進行了更改，但翻譯不起作用function hexagon(x:number, y:number, r:number, color:string) { 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(); context.translate(70,70); context.fill();}hexagon(100, 100, 50, "red")
1 回答
ABOUTYOU
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 關注
- 126 瀏覽
添加回答
舉報
0/150
提交
取消