HAML5 Canvas问题与matcmatics

Question

您好我正在使用canvas元素创建som形状，但我遇到了一些数学问题。

问题1： 我必须计算相对于前一行的角度，我只使用0到180和0到-180度。

问题1： 我必须在角落放一个角落半径我如何在画布上画这个？ 这是一个例子：

希望somone可以提供帮助吗？

Answer 1

您可以使用二次曲线制作圆角：

＆＃13;

＆＃13;

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


roundedRect(20,20,100,75,10);
ctx.stroke();


function roundedRect(x,y,width,height,radius){
    //
    var x1=x+radius;
    var x2=x+width-radius;
    var x3=x+width;
    var y1=y+radius;
    var y2=y+height-radius;
    var y3=y+height;
    //
    ctx.beginPath();
    ctx.moveTo(x1, y);
    ctx.lineTo(x2, y);
    ctx.quadraticCurveTo(x3, y, x3, y1);
    ctx.lineTo(x3, y2);
    ctx.quadraticCurveTo(x3, y3, x2, y3);
    ctx.lineTo(x1, y3);
    ctx.quadraticCurveTo(x, y3, x, y2);
    ctx.lineTo(x, y1);
    ctx.quadraticCurveTo(x, y, x1, y);
    ctx.closePath();
}

＆＃13;

body{ background-color: ivory; }
canvas{border:1px solid red;}

＆＃13;

<canvas id="canvas" width=300 height=300></canvas>

＆＃13;

＆＃13;

＆＃13;