JavaScript-具有圆角的html5画布三角形

发布时间：2023-03-14 13:05:15 所属栏目：教程来源：

导读：我是HTML5 Canvas的新手,正在尝试绘制一个带有圆角的三角形.

ctx.lineJoin = "round";
ctx.linewidth = 20;
但他们都不在工作.

var ctx = document.querySelector("canvas").getContext('2d');
ctx

我是HTML5 Canvas的新手,正在尝试绘制一个带有圆角的三角形.

ctx.lineJoin = "round";
ctx.linewidth = 20;
但他们都不在工作.

var ctx = document.querySelector("canvas").getContext('2d');
ctx.scale(5, 5);

var x = 18 / 2;
var y = 0;
var triangleWidth = 18;
var triangleHeight = 8;
// how to round this triangle??
ctx.beginPath();
ctx.moveto(x, y);
ctx.lineto(x + triangleWidth / 2, y + triangleHeight);
ctx.lineto(x - triangleWidth / 2, y + triangleHeight);
ctx.closePath();
ctx.fillStyle = "#009688";
ctx.fill();

ctx.fillStyle = "#8BC34A";
ctx.fillRect(0, triangleHeight, 9, 126);
ctx.fillStyle = "#CDDC39";
ctx.fillRect(9, triangleHeight, 9, 126);
<canvas width="800" height="600"></canvas>

圆角

我经常使用的无价函数是圆形多边形.它需要一组描述多边形顶点的2D点,并添加圆弧以圆角化.

圆角并保持在多边形区域的约束范围内的问题是,您无法始终拟合具有特定半径的圆角.

在这些情况下,您可以忽略拐角并将其保持为尖角,或者可以减小倒圆半径以尽可能地适合拐角.

如果拐角太尖锐并且拐角处的线长度不足以获取所需的半径,则以下函数将调整拐角倒圆半径的大小以适合拐角.

请注意,如果您想知道发生了什么,则代码中的注释将引用下面的“数学”部分.

roundedpoly(ctx,点,半径)

// ctx is the context to add the path to
// points is a array of points [{x :?, y: ?},...
// radius is the max rounding radius
// this creates a closed polygon.
// To draw you must call between
// ctx.beginPath();
// roundedpoly(ctx, points, radius);
// ctx.stroke();
// ctx.fill();
// as it only adds a path and does not render.
function roundedpoly(ctx, points, radiusAll) {
var i, x, y, len, p1, p2, p3, v1, v2, sinA, sinA90, radDirection, drawDirection, angle, halfAngle, cRadius, lenOut,radius;
// convert 2 points into vector form, polar form, and normalised
var asvec = function(p, pp, v) {
v.x = pp.x - p.x;
v.y = pp.y - p.y;
v.len = Math.sqrt(v.x * v.x + v.y * v.y);
v.nx = v.x / v.len;
v.ny = v.y / v.len;
v.ang = Math.atan2(v.ny, v.nx);
}
radius = radiusAll;
v1 = {};
v2 = {};
len = points.length;
p1 = points[len - 1];
// for each point
for (i = 0; i < len; i++) {
p2 = points[(i) % len];
p3 = points[(i + 1) % len];
//-----------------------------------------
// Part 1
asvec(p2, p1, v1);
asvec(p2, p3, v2);
sinA = v1.nx * v2.ny - v1.ny * v2.nx;
sinA90 = v1.nx * v2.nx - v1.ny * -v2.ny;
angle = Math.asin(sinA);
//-----------------------------------------
radDirection = 1;
drawDirection = false;
if (sinA90 < 0) {
if (angle < 0) {
angle = Math.PI + angle;
} else {
angle = Math.PI - angle;
radDirection = -1;
drawDirection = true;
}
} else {
if (angle > 0) {
radDirection = -1;
drawDirection = true;
}
}
if(p2.radius !== undefined){
radius = p2.radius;
}else{
radius = radiusAll;
}
//-----------------------------------------
// Part 2
halfAngle = angle / 2;
//-----------------------------------------
//-----------------------------------------
// Part 3
lenOut = Math.abs(Math.cos(halfAngle) * radius / Math.sin(halfAngle));
//-----------------------------------------
//-----------------------------------------
// Special part A
if (lenOut > Math.min(v1.len / 2, v2.len / 2)) {
lenOut = Math.min(v1.len / 2, v2.len / 2);
cRadius = Math.abs(lenOut * Math.sin(halfAngle) / Math.cos(halfAngle));
} else {
cRadius = radius;
}
//-----------------------------------------
// Part 4
x = p2.x + v2.nx * lenOut;
y = p2.y + v2.ny * lenOut;
//-----------------------------------------
// Part 5
x += -v2.ny * cRadius * radDirection;
y += v2.nx * cRadius * radDirection;
//-----------------------------------------
// Part 6
ctx.arc(x, y, cRadius, v1.ang + Math.PI / 2 * radDirection, v2.ang - Math.PI / 2 * radDirection, drawDirection);
//-----------------------------------------
p1 = p2;
p2 = p3;
}
ctx.closePath();
}
您可能希望为每个点添加一个半径,例如{x：10,y：10,radius：20},这将设置该点的最大半径.半径为零将不会舍入.

角由红色,A,B和C中的三个点定义.圆的半径为r,我们需要在圆心,D和E上找到绿点F,这将定义圆弧的起点和终点.

首先,我们通过归一化两条线的向量并获得叉积来找到B,A和B,C的线之间的角度. (注释为第1部分)我们还找到了BC线与BA呈90度角的角度,因为这将有助于确定放置圆的线的哪一侧.

现在我们有了线之间的角度,我们知道该角度的一半定义了圆心将位于F的线,但是我们不知道该点与B的距离(注释为第2部分)

有两个直角三角形BDF和BEF相同.我们在B处有一个角度,我们知道边DF和EF等于圆r的半径,因此我们可以求解三角形以获得从B到F的距离

为方便起见,而不是计算F是BD(注释为第3部分)的解法,因为我将沿BC线移动该距离(注释为第4部分),然后旋转90度并向上移动至F(注释为第5部分).该过程给出了点D并沿着线BA移动到E

我们使用点D和E以及圆心F(以其抽象形式)来计算圆弧的起点和终点. (在弧函数部分6中完成)

代码的其余部分与沿线和远离线的方向以及扫弧的方向有关.

代码部分(特殊部分A)使用两条线BA和BC的长度,并将它们与距BD的距离进行比较(如果该距离大于我们知道的弧线不适合的线长度的一半).然后,如果线BD是BA和BC最短线的长度的一半,则我求解三角形以找到半径DF

（编辑：驾考网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!