Canvas HTML 5在每一行的末端绘制圆圈？

编辑：我想出了一个解决方案http://jsfiddle.net/rwuvnrau/1我应该关闭还是会有帮助？Canvas HTML 5在每一行的末端绘制圆圈？

我正在玩帆布，并试图在我的网站内有趣的一行。

我开始弄清楚bezierCurveTo函数是如何工作的，我仍然需要细化一下，但作为一个设计概念，我想绘制有边界的圆圈（没有中间的，类似于聊天和播放图标下面的屏幕）在每条线的末端。

我不知道如何去这一点，我能想到的唯一的事情就是，因为我知道P0位置context.moveTo(850, 0); 850我可以得出坐标的圆

enter image description here

var canvas = document.getElementById('myCanvas'); 
    var context = canvas.getContext('2d'); 

    canvas.width = 970; 
    canvas.height = 600; 

    context.beginPath(); 
    context.moveTo(850, 0); 
    context.bezierCurveTo(850, 378, 0, 185, 3, 492); 
    context.lineWidth = 2; 

    // line color 
    context.strokeStyle = '#4285f4'; 
    context.stroke();

已经有一段时间了，但我认为要创建一个新对象，我可以只做context.beginPath()然后建立一个圆。我需要研究这一点，做一个小提琴，但我希望有人能够很快帮助我。

FIDDLE

来源

2014-10-29 Michael Joseph Aubry

不知道我是否应该关闭或什么，但我想通了http://jsfiddle.net/rwuvnrau/1/咨询请。 – 2014-10-29 19:49:50

既然你首先要去问问题，你应该用代码发表答案。让社区决定这个问题是否足够重要，以维持生活。 – 2014-10-29 20:09:03

Gotcha，我有小提琴，但你说得对，我应该在这里添加代码。 – 2014-10-29 20:09:43

所以我不应该问不先尝试，但我是不是在我的画布技巧没有信心。这可能会派上用场。

var canvas = document.getElementById('myCanvas'); 
    var context = canvas.getContext('2d'); 

    var centerX = canvas.width/2; 
    var centerY = canvas.height/2; 
    var radius = 10; 



    canvas.width = 970; 
    canvas.height = 600; 

    // curved line 
    context.beginPath(); 
    context.moveTo(850, 100); 
    context.bezierCurveTo(850, 378, 0, 185, 3, 492); 
    context.lineWidth = 2; 

    // line color 
    context.strokeStyle = '#4285f4'; 
    context.stroke(); 

    // circle 
    context.beginPath(); 
    context.arc(850, 90, radius, 0, 2 * Math.PI, false); 
    context.fillStyle = 'transparent'; 
    context.fill(); 
    context.lineWidth = 2; 
    context.strokeStyle = '#4285f4'; 
    context.stroke();

画布真的是关于数学，知道你的对象的坐标。由于我知道我的线的出发点是在x轴上850px，我可以做context.arc(850, 90, radius, 0, 2 * Math.PI, false); y轴的圆圈为90，因为我的起始点的y轴为100，半径为10.

在此我的代码版本我没有考虑斯托克宽度，所以添加2px到你的等式，在我的网站上工作正常，不知道我是否想实现这个，虽然哈哈。

来源

2014-10-29 20:14:29

Canvas HTML 5在每一行的末端绘制圆圈？

回答

相关问题