Canvas 按路径绘制圆弧

圆弧,就是以某个点 (x0,y0) 作为圆心(红色),以两个角度作为起始(startAngle)和结束角度(enddAngle),绘制的一定大小(radius) 的半圆

如果开始角度为 0 ,而结束角度为 2 * Math.PI ,那么就是一个圆了

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

arc() 方法

arc() 用于绘制圆弧,圆弧路径的圆心在 (x, y) 位置,半径为 r ,根据anticlockwise (默认为顺时针)指定的方向从 startAngle 开始绘制,到 endAngle 结束

void ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
参数 说明
x 圆弧中心(圆心)的 x 轴坐标
y 圆弧中心(圆心)的 y 轴坐标
radius 圆弧的半径
startAngle 圆弧的起始点, x轴方向开始计算,单位以弧度表示
endAngle 圆弧的终点, 单位以弧度表示
anticlockwise 可选, bool 类型 ,如果为 true,逆时针绘制圆弧,反之,顺时针绘制,默认为 false

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

范例

下面的代码以 (100,100) 作为圆心, 绘制一个半径为 50 的圆弧,圆弧的起始角度为 30,结束角度为 75

<!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 = "#9013FE"
ctx.beginPath();
ctx.arc(100,100,50,30 * Math.PI /180,75 * Math.PI /180 );
ctx.stroke();
</script>

运行结果如下

绘制圆

下面的代码以 (100,100) 作为圆心, 绘制一个半径为 50 的圆

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

<script>
var c   = document.getElementById("canvas-2");
var ctx = c.getContext("2d");
ctx.strokeStyle = "#9013FE"
ctx.beginPath();
ctx.arc(100,100,50,0,2*Math.PI);
ctx.stroke();
</script>

运行结果如下

Canvas 基础教程

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

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

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