html5 Canvas画图6：曲线之arcTo
html5 Canvas画图6：曲线之arcTo<div class="postText"><div id="cnblogs_post_body">上一篇文章讲了canvas的arc方法，这一篇讲和他有关的arcTo方法。
arc与arcTo，从名字都能看出来相似。arcTo也是画曲线的方法，而且他画出的曲线也是正圆的一段弧线。但他的参数和arc简直是不共戴天~
ctx.arcTo(x1,y1,x2,y2,radius);arcTo的参数中包括两个点，而且这两个点中并没有表示圆心的点，仅仅最后的参数是圆的半径，表示arcTo和圆有那么点关系。
网上关于arcTo的文章很少，好不容易找到一篇还是外国的；而且canvas画图木有直观工具，只能靠猜，arcTo害我猜了半天。。
为了直观的描述，我采取了一种辅助办法：arcTo画到哪里，我就用lineTo也画到相应的点，以查看他们的关系。就是画辅助线。
<div class="codecolorer-container javascript default"><div class="javascript codecolorer"><div class="cnblogs_code">var x0=100,y0=400,x1 = 500,y1 = 400,x2 = 450,y2 = 450;ctx.beginPath();ctx.moveTo(x0,y0);ctx.strokeStyle = "#f00";ctx.lineWidth = 2;ctx.arcTo(x1,y1,x2,y2,20);ctx.stroke();ctx.beginPath();ctx.strokeStyle = "rgba(0,0,0,0.5)";ctx.lineWidth = 1;ctx.moveTo(x0,y0);ctx.lineTo(x1,y1);ctx.fillText('x1,y1',x1+10,y1+10)ctx.lineTo(x2,y2);ctx.fillText('x2,y2',x2+10,y2)ctx.stroke();
页:
[1]