介绍arcTo()的方法及使用

定义:

arcTo() 方法在画布上创建介于两个切线之间的弧/曲线。除了arc()之外,Canvas的绘图环境对象还提供了另一个用于创建圆弧路径的方法,那就是arcTo()。

arcTo()方法的参数分别代表两个点击圆形半径。该方法一指定的半径来绘制一条圆弧,此圆弧与当前点到第一个点(x1,y1)的连线相切,而且第一个点到第二点(x2,y2)的连线也相切。该方法的这些特性,使得它非常适合用了绘制矩形的原角

语法arcTo(x1,x2,y1,y2,radius)

实例:可以用下面的代码绘制一个矩形的右上角(圆角):


参数:

描述:

这个方法的头 5 个参数指定了圆周的一个起始点和结束点。调用这个方法会在当前点和当前子路径的起始点之间添加一条直线。接下来,它沿着圆周,在子路径的起始点和结束点之间添加弧。

最后一个counterclockwise参数指定了圆应该沿着哪个方向遍历来连接起始点和结束点。这个方法将当前位置设置为弧的终点。

参数值:

一个简单的动画帮助理解:

HTML:

css:

javascript:

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、添加一个 Canvas 1.布置画布:通过添加<canvas>标签,添加canvas元素 Canvas在HTM...
    Lia代码猪崽阅读 2,269评论 0 3
  • 原文地址 我们一开始知道的有: 箭头可以在线段开头 也可以在结尾,也可以两端都有。 我们希望指定一个角度θ,见图,...
  • 验证浏览器是否支持 Your browser does not support HTML5 Canvas. f...
    shuaiutopia阅读 2,672评论 0 0
  • 在慕课网上学习了 Canvas绘图详解 这门教程,写了这篇canvas教程,想和大家分享学习的过程,希望和大家共同...
    爱可不可爱_90845阅读 793评论 3 8
  • HTML5 中新增的一个相当于画布的标签,自带各种 API ,通过 JS 调用和搭配,实现图案绘制和想要的效果。 ...
    Primers阅读 1,471评论 0 1