html5画布拉伸一个矩形的一面

Question

是否有可能我可以伸展一个矩形的边，并将其形状从直线改为其他类似圆弧的东西，或者从中心拉伸它，如下图所示

Answer 1

您可能不希望使用其他人建议的弧线，因为弧线只会给你一个弧线。更好的方法是将矩形（4边）表示为4立方贝塞尔曲线。具有与起点和终点共线的控制点的三次贝塞尔曲线将产生一条直线，因此您仍然可以表示一个普通的矩形。然后，当您想要将两侧拉伸成曲线时，只需根据所需的曲线向外，向上或向下移动控制点。得到quick understanding of beziers可能是有益的。

我会做一个图片来更好地说明这一点，并在几分钟内将其包括在内。

因此，当我们绘制矩形时，代码看起来像这样：

ctx.moveTo(p1.x,p1.y);
ctx.bezierCurveTo(cp1.x,cp1.y,cp2.x,cp2.y,p2.x,p2.y);
ctx.bezierCurveTo(cp3.x,cp3.y,cp4.x,cp4.y,p3.x,p3.y);
ctx.bezierCurveTo(cp5.x,cp5.y,cp6.x,cp6.y,p4.x,p4.y);
ctx.bezierCurveTo(cp7.x,cp7.y,cp8.x,cp8.y,p1.x,p1.y);

Answer 2

只需绘制一个矩形即可实现此目的。但是，您可以绘制三条线并为第四条绘制弧形。 context.arc()上的Here's a tutorial。

Answer 3

你可以使用quadraticCurveTo函数它有4个参数并且很容易使用看看

的例子

http://jsfiddle.net/55Ws3/

<canvas width="800" height="800" id="world" style="border: 1px solid red;"><p class="noCanvas">You need a <a href="#">modern browser</a> to view this.</p></canvas>


var canvasElement = document.getElementById('world');
// Always check for properties and methods, to make sure your code doesn't break 
// in other browsers.
if (canvasElement && canvasElement.getContext) {
    // Get the 2d canvasContext.
    // Remember: you can only initialize one canvasContext per element.
    var canvasContext = canvasElement.getContext('2d');
    if (canvasContext) {
        canvasContext.beginPath();
        canvasContext.moveTo(100, 200);
        canvasContext.lineTo(200, 200);
        canvasContext.quadraticCurveTo(325, 250, 200, 300);
        canvasContext.lineTo(100, 300);
        canvasContext.lineTo(100, 200);
        canvasContext.fillStyle = 'red';
        canvasContext.strokeStyle = 'red';
        canvasContext.lineWidth = 2;
        canvasContext.fill();
        canvasContext.stroke();
        canvasContext.closePath();
    }
}