Canvas 按路径绘制弧

平面图形的世界里,不仅有矩形,还有弧

弧,就是以某个点(x0,y0) 作为起始点(蓝色),给定两个参考点(x1,y1) 、 (x2,y2) 还有一个半径组成的绘制出来的图形

又是烧脑的数学知识,关系到切线原理

说直白一点,就是以第一个参考点作为顶点,由 3 个点组成的夹角的内切圆弧,弧的大小取决于给定的半径 然后起始点与圆弧的切点之间以直线连接

虽然图形上看是内切圆,但是,实际上不是内切圆

Canvas 中的 2D 渲染上下文文提供了 arcTo() 方法用于绘制这种圆弧

arcTo() 方法

arcTo() 根据控制点和半径绘制圆弧路径,使用当前的描点(前一个 moveTo()lineTo() 等函数的止点),根据当前描点与给定的控制点1连接的直线,和控制点1与控制点2连接的直线,作为使用指定半径的圆的切线,画出两条切线之间的弧线路径

void ctx.arcTo(x1, y1, x2, y2, radius);
参数 说明
x1 第一个控制点的 x 轴坐标
y1 第一个控制点的 y 轴坐标
x2 第二个控制点的 x 轴坐标
y2 第二个控制点的 y 轴坐标
radius 圆弧的半径

注意: arcTo() 方法绘制出来的也是虚拟路径,需要使用 stroke() 实体化

范例

例如下面的代码以 (50,50) 作为基点, (200,80) 和 (120,300) 作为控制点,绘制一个半径为 50 的圆弧

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-1" width="300" height="200">
</canvas>

<script>
var c   = document.getElementById("canvas-1");
var ctx = c.getContext("2d");
ctx.strokeStyle = "green"
ctx.beginPath();
ctx.moveTo(50,50);
ctx.arcTo(200,300,120,300,10*Math.PI);
ctx.stroke();
</script>

运行结果如下

是不是看起来很诧异,我们画几条辅助线

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-2" width="300" height="300">
</canvas>

<script>
var c   = document.getElementById("canvas-2");
var ctx = c.getContext("2d");
ctx.strokeStyle="red"
ctx.beginPath()
ctx.moveTo(50,50);
ctx.lineTo(200,300);
ctx.lineTo(120,300);
ctx.closePath();
ctx.stroke();
ctx.strokeStyle = "green"
ctx.beginPath();
ctx.moveTo(50,50);
ctx.arcTo(200,300,120,300,10*Math.PI);
ctx.stroke();
</script>

运行结果如下

Canvas 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.