canvas arcTo()

2018-8-9 09:39| 作者: admin| 查看: 1529| 评论: 0|来自: 蚂蚁部落

此方法外观与arc方法外观相似,有理由相信在功能上也有类似之处。

arc方法规规矩矩绘制一个圆弧,具体参阅canvas arc()一章节。

而arcTo方法比arc方法多了"一点",那么肯定就不太规矩。

它绘制的图案中包含圆弧,但是多出了一条直线“尾巴”。

语法结构:

[JavaScript] 纯文本查看 复制代码
ctx.arcTo(x1, y1, x2, y2, radius);

参数解析:

(1).(x1,y1):必需,规定第一个控制点的坐标。

(2).(x2,y2):必需,规定第二个控制点的坐标。

(3).radius:必需,规定圆弧所在圆的半径尺寸。

绘制示意图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/30/010440taia0a8bf7v78i8j.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

详细分析如下:

(1).起点与第一个控制点连接成一条直线。

(2).第一个控制点与第二个控制点连接成一条直线。

(3).那么通过这两条直线与圆的半径可以绘制一个与直线相切的圆弧。

(4).起点与圆弧连接起来,就是最终绘制的图案。

浏览器兼容:

(1).IE9+浏览器支持此方法。

(2).edge浏览器支持此方法。

(3).谷歌浏览器支持此方法。。

(4).火狐浏览器支持此方法。

(5).Opera浏览器支持此方法。

(6).Safari浏览器支持此方法。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script>
window.onload=function(){
  let cs = document.getElementById("cs");
  let ctx = cs.getContext("2d");
  ctx.beginPath();
  ctx.moveTo(10, 50);
  ctx.lineWidth=4;
  ctx.arcTo(150, 50, 150, 150, 50);
  ctx.stroke();
  ctx.closePath();
}
</script>
</head>
<body>
<canvas id="cs" width="400" height="300"></canvas>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/30/010518xhn3n3ml8mchhue8.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).起点坐标由moveTo方法规定。

(2).第一个控制点坐标是(150, 50),第二个控制点坐标是(150, 150)。

(3).然后根据半径绘制一个与两条直线相切的圆弧。

(4).最后从起点绘制一条直线与圆弧连接起来(连接点是切点),形成最终图案。

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script>
window.onload=function(){
  let cs = document.getElementById("cs");
  let ctx = cs.getContext("2d");
  ctx.beginPath();
  ctx.moveTo(100, 50);
  ctx.lineWidth=4;
  ctx.arcTo(150, 50, 150, 150, 50);
  ctx.stroke();
  ctx.closePath();
}
</script>
</head>
<body>
<canvas id="cs" width="400" height="300"></canvas>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/30/010543nb7z0p0qdd0wgbll.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

如果起点坐标恰好位于切点之上,那么可以绘制一个规范的圆弧。

相关阅读:

(1).beginPath方法参阅canvas beginPath()一章节。

(2).moveTo方法参阅canvas moveTo()一章节。

(3).lineWidth参阅canvas lineWidth一章节。

(4).stroke方法参阅canvas stroke()一章节。


鲜花

握手

雷人

路过

鸡蛋
返回顶部