画布用二次曲线画圆答案

【问题标题】：canvas draw circle with quadratic curve画布用二次曲线画圆
【发布时间】：2013-01-05 09:11:09
【问题描述】：

我知道我可以使用画布的arc 函数绘制弧线，但是当我增加该弧线的大小时，它会改变它的起点和终点 x,y 点。所以我在想我们是否可以用其他方式来绘制弧线，在增加弧线大小的同时保持起点固定。

编辑
下面是显示我正在寻找的图像。第一张图片显示了一个矩形。当它的一侧被拉伸时，它变成了圆形（第二张图片）。当侧面进一步拉伸时，它变成了大圆圈。在所有图像中，您都可以看到圆的端点连接到矩形的角。这就是我想做的。

第一张图片

第二张图片

第三张图片

或者您可以查看this video 以了解我想要做什么。

我做了什么
这个fiddle 显示了我的工作结果。
要绘制矩形，只需单击并拖动鼠标。

Here is the code

【问题讨论】：

改变起点和终点是什么意思？你能显示问题的图片吗？ “尺寸”是指厚度吗？
@6502：我的意思是如果我们保持起点和终点固定并增加弧的大小，那么它看起来更像一个半圆
@6502：就像二次曲线一样，当我们增加它的大小时，端点的位置保持不变。
关于赏金，“当前的答案没有包含足够的细节。”到底是什么意思？
看，如果你不打算解释为什么答案不够好，我们帮不了你。

标签： javascript html canvas

【解决方案1】：

检查这个：http://jsfiddle.net/KZBzq/4/

用 bezierCurveTo

更新了答案

HTML

<label>Range :</label>
<input type="range" name="points" value="0" min="0" step="1" max="100" id="range"> 
<canvas id="myCanvas" width="578" height="250"></canvas>

draw(100); 

$('#range').on('change', function(){
  range = parseInt($(this).val());
  draw(100-range)
})

function draw(val){

  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d'),
  x = 100,
  y = 100,
  cp1x = x/2,
  cp2x = y/2,
  cp1y = val,
  cp2y = val;
  context.clearRect(0, 0, canvas.width, canvas.height);

  context.beginPath();
  context.lineWidth = 1;

  context.moveTo(25 , x);
  context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);

    // line color
    context.strokeStyle = 'black';
    context.stroke();

}

现在 x 和 Y 是固定的。这是您的要求吗？

【讨论】：

我知道我可以用弧功能做薄。我正在寻找其他方法。

【解决方案2】：

我相信您正在寻找这样的东西：

draw(0);
$('#range').on('change', function(){
    range = parseInt($(this).val());
    draw(range)
})

function draw(val){
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d'),
    x = 100,
    y = 50,
    d;
    context.clearRect(0, 0, canvas.width, canvas.height);

    d = Math.sqrt(Math.pow(val,2) + Math.pow(50,2));

    context.beginPath();
    context.lineWidth = 1;

    context.arc(x,y+val,d,0,2*Math.PI);

    // line color
    context.strokeStyle = 'black';
    context.stroke();

    // Cut off the top of the circle.
    context.clearRect(0, 0, canvas.width, y);

    // This stuff's just to show some dots
    context.fillStyle = 'red';
    context.fillRect(x-1,y-1,2,2); // Middle
    context.fillRect(x-52,y-2,4,4);//Target point 1
    context.fillRect(x+48,y-2,4,4);// Target point 2

    context.fillRect(x-2,y+d+val-2,4,4); // Point on circle
    context.fillStyle = 'black';
}

Working sample

这样做有两个缺点，即越靠近圆圈，它会变得“越慢”，因为圆圈在隐藏部分（滑块控制它的大小）呈指数级变大，而且它不起作用对于现在的对角线。

除此之外，它按预期工作。

【讨论】：