javascript - 如何使用打字稿在画布html中翻译六边形
问题描述
我在 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")
解决方案
我会尝试创建一个绘制六边形的函数,您不必使用翻译。
见下文
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>
如您所见,无需使用翻译
推荐阅读
- javascript - 将错误作为 ERROR TypeError: Argument not optional in IE 11
- python - pyqt5:未启用小部件时如何隐藏占位符?
- java - 将给定像素长度转换为宽度和高度的程序
- c# - 获取“该服务不允许您匿名登录”wcf net.tcp 自托管服务
- android - 如何在一个 Kotlin Activity 中将共享首选项中的项目添加到两个微调器
- javascript - 重定向而不存储在历史记录中
- java - 如何使 ANTLR 规则消耗所有可能的元素,而不仅仅是第一个?
- reactjs - 我的 Redux Thunk 出了什么问题它被称为正常但由于某种原因失败了我无法得到
- python - 使用 AES-256-cbc 对字符串进行递归解密
- javascript - React Datepicker onclick 在 Edge 和 IE 浏览器中不起作用