Javascript 使用html5画布创建竖起拇指图标

我想用html5画布命令（例如arc、arcto…）画一个拇指朝上的图标，比如（）。我知道这些功能，但我不知道如何开始设计竖起大拇指图标

设计应在3 x 3单元格的网格上拆分

画布将为300 x 300，画布中的每个单元格将为100 x 100

<canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">

    <script>
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");

        var rectX = 70;
        var rectY = 70;
        var rectWidth = 50;
        var rectHeight = 100;
        var cornerRadius = 10;

        ctx.lineJoin = "round";
        ctx.lineWidth = cornerRadius;

        ctx.strokeRect(rectX+(cornerRadius/2), rectY+(cornerRadius/2), rectWidth-cornerRadius, rectHeight-cornerRadius);
    </script>

var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
var-rectX=70；
var-rectY=70；
宽度=50；
高度=100；
半径=10；
ctx.lineJoin=“圆形”；
ctx.lineWidth=拐角半径；
ctx.strokeRect（矩形+角半径/2）、矩形+角半径/2、矩形宽度角半径、矩形高度角半径）；

上面的代码创建了竖起拇指图标的圆形袖子

任何人都可以帮助如何创建这样的图标。谢谢

四舍五入。 若要绘制该形状，您需要将路径的角画圆。路径只是一组x和y坐标作为一个数组

贝齐尔太丑了 大多数解决方案都需要使用贝塞尔曲线，但我发现它们非常难看，因为它们从来都不匹配圆的形状，在设计领域，圆必须是正确的形状（圆形）

弧 最好的解决方案是使用

ctx.arc

功能渲染路径，并为每个角点提供起始角和结束角。这在脑海中很难想象，因此最好定义角点，使其具有半径，并让机器为您计算起点和终点弧角

因此，路径的每个角都有x，y坐标和半径。半径为0时不舍入。如果形状是闭合的，则还需要在末端创建圆角，如果形状是打开的，则不需要创建圆角

您的形状数据可能看起来像（不是竖起大拇指）

渲染示例 渲染非常复杂，对于每个角点，您都需要找到圆弧的中心和圆弧相交的引入线上的点（切线）。我不打算在这里解释数学，因为我认为你不想这样，但是如果你对向量数学感到满意的话，这个例子有一个逐步的解释

通过一些有效解决方案的检查，并提供了一种具有开放和闭合路径（末端有开放和闭合圆弧）的方法，下面的示例应该可以让您创建所需的形状。（我不会绘制点，因为我太懒了）

示例绘制两个形状，闭合和打开。右边的形状也有一个没有半径的角。它使用

ctx.lineJoin=“miter”

确保拐角锋利。尽管您可以通过设置

ctx.lineJoin=“round”

使外侧边缘圆化，但外侧圆化的半径等于线宽的一半

const ctx=canvas.getContext（“2d”）；
常量形状=[
{x:10，y:10，r:20}，
{x:150，y:10，r:50}，
{x:100，y:100，r:20}，
{x:50，y:100，r:20}，
{x:50，y:200，r:20}，
{x:210，y:100，r:60}，
{x:210，y:300，r:20}，
{x:10，y:300，r:20}，
“关闭”，
];
常量shapepen=[
{x:390，y:10，r:0}，
{x:390，y:300，r:50}，
{x:310，y:300，r:20}，
{x:320，y:200，r:0}，
{x:240，y:200，r:40}，
{x:240，y:10，r:0}，
];
//圆线端
ctx.lineCap=“圆形”；
//如果没有半径，还有尖角
ctx.lineJoin=“斜接”；
//画封闭和开放的形状
drawRoundedShape（形状，12，“黑色”）；
drawRoundedShape（Shapepen，12，“黑色”）；
函数drawRoundedShape（形状、线宽、笔划样式、填充样式）{
函数圆角（p1、p2、p3、returnCorner={}）{
变量x，y，v1x，v1y，v2x，v2y，leng，l1，cx，cy；
//将线从p2转换为归一化向量
v1x=p1.x-p2.x；
v1y=p1.y-p2.y；
v2x=p3.x-p2.x；
v2y=p3.y-p2.y；
leng=Math.sqrt（v1x*v1x+v1y*v1y）；
v1x/=leng；
v1y/=leng；
leng=Math.sqrt（v2x*v2x+v2y*v2y）；
v2x/=leng；
v2y/=leng；
//查方向
常数交叉=（v1x*v2y-v1y*v2x）；
//如果接近平行，则忽略为可圆。
if（数学abs（交叉）<1e-4）{
returnCorner.solutionFound=false；
返回角；
}
//设置半径标志、圆弧方向以匹配拐角
常数半径=p2.r*数学符号（十字）；
returnCorner.dir=半径>0；
returnCorner.solutionFound=true；
//获取从p2到沿p2-p1线的圆切线的距离
l1=半径/横截面；
l1+=l1*（v1x*v2x+v1y*v2y）；
//在线路p2-p1上查找切线触点
x=p2.x+v1x*l1；
y=p2.y+v1y*l1；
//虽然不需要保存第一个切点，但它可能会派上用场
returnCorner.t1x=x；
returnCorner.t1y=y；
//求弧心
cx=x-v1y*半径；
cy=y+v1x*半径；
//找到弧的起始方向
returnCorner.ang1=Math.atan2（y-cy，x-cx）；
//在p2-p3线上查找切线触点
x=p2.x+v2x*l1；
y=p2.y+v2y*l1；
//求弧端方向
returnCorner.ang2=Math.atan2（y-cy，x-cx）；
//保存第二个切点
returnCorner.t2x=x；
returnCorner.t2y=y；
//保存弧中心
returnCorner.x=cx；
returnCorner.y=cy；
//将拐角返回为圆弧
返回角；
}
变量角，i，len，是封闭的；
len=形状。长度；
isClosed=false；
if（typeof shape[len-1]=“string”&&shape[len-1].toLowerCase（）=“closed”）{
len-=1；
isC
const shape = [
    {x : 10,  y : 10,  r : 20},    
    {x : 150, y : 10,  r : 50},    
    {x : 100, y : 100, r : 20},    
    {x : 50,  y : 100, r : 20},    
    {x : 50,  y : 200, r : 20},    
    {x : 210, y : 100, r : 60},    
    {x : 210, y : 300, r : 20},    
    {x : 10,  y : 300, r : 20},    
    "closed",
];