我在 html 的畫布上畫了一個(gè)六邊形，當(dāng)我使用翻譯方法時(shí)，我想翻譯畫布中的六邊形，它不會(huì)翻譯六邊形，但當(dāng)我翻譯時(shí)，當(dāng)我使用矩形時(shí)，它會(huì)翻譯。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： 根據(jù)@helder給出的答案，我已經(jīng)進(jìn)行了更改，但翻譯不起作用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貢獻(xiàn)1812條經(jīng)驗(yàn) 獲得超5個(gè)贊
我會(huì)嘗試創(chuàng)建一個(gè)繪制六邊形的函數(shù)，這樣您就不必使用翻譯。
見下文
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 >
這是一個(gè)細(xì)分function hexagon(x, y, r, color)
它以六邊形 (
x,y) 為中心、半徑 (r) 和顏色我們遍歷六個(gè)頂點(diǎn)并繪制線條
計(jì)算只是一點(diǎn)三角函數(shù)，沒什么特別的
這樣我們就可以在任何我們想要的位置繪制六邊形。
您可以輕松地重構(gòu)相同的函數(shù)來繪制八邊形或其他多邊形。
這是這些六邊形的動(dòng)畫版本
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 關(guān)注
- 140 瀏覽
添加回答
舉報(bào)
0/150
提交
取消