JavaScript Canvas绘制圆、弧与扇形的算法实现

半径为r的圆上任意一点P(x,y)与圆心O(x0, y0)之间的几何关系遵循以下公式：x = x0 + r*cos(A)，y = y0 + r*sin(A)。其中，A代表弧度制的角度值。

相关演示样例请访问：http://www.zhaojz.com.cn/demo/draw6.html

圆的绘制实现

一、圆的绘制方法

// 绘制圆形或椭圆的基础函数
// dot 参数表示圆心的坐标点
// r 参数定义圆的半径长度
// compressionRatio 参数用于控制垂直方向的压缩比例，实现椭圆效果
function drawCircle(dot, r, compressionRatio, data){
var pstart = [dot[0]+r, dot[1]]; // 确定绘图的起始点坐标
var pre = pstart; // 初始化前一个点的坐标
for(var i=0; i < 360; i+=5){
rad = i*Math.PI/180; // 将角度转换为弧度制
// r*Math.cos(rad) 计算当前点相对于圆心的水平偏移量
// r*Math.sin(rad) 计算当前点相对于圆心的垂直偏移量
// compressionRatio 为垂直方向的压缩系数
var cur = [r*Math.cos(rad)+dot[0], compressionRatio*r*Math.sin(rad)+dot[1]]; // 计算当前点的实际坐标
drawLine(pre,cur); // 连接前一点与当前点形成线段
pre = cur; // 更新前一点为当前点，准备下一次循环
    }
drawLine(pre,pstart); // 最后连接起点，使图形闭合
// 绘制圆心处的标记点
drawPoint({
pw:2,ph:2,color:'DarkRed',point:dot
    });
}

弧线的绘制逻辑

二、弧线的绘制原理

弧线的绘制逻辑与圆相似，主要区别在于只绘制圆周的一部分。

// 绘制弧线的主函数
// dot 参数表示弧所在圆的圆心坐标
// r 参数定义弧线的半径
// angle 参数定义弧线的圆心角大小
// angleOfSlope 参数定义弧线起始边与X轴正方向的夹角
// pop 参数控制是否将弧线整体向外偏移（弹出效果）
// title 参数为弧线添加的文本标签
function drawArc(dot, r, angle, angleOfSlope, pop, title){
var newDot = [dot[0], dot[1]]; // 初始化圆心坐标
var a = (angleOfSlope+angle/2)*Math.PI/180; // 计算弧线中点角度
if(pop){ // 如果启用弹出效果，则重新计算圆心坐标
newDot[0] = dot[0]+10*Math.cos(a);
newDot[1] = dot[1]+10*Math.sin(a);
    }
if(!angleOfSlope){
angleOfSlope = 0;
    }
var aos = angleOfSlope*Math.PI/180;
var aos2 = (angleOfSlope+angle)*Math.PI/180;
var pstart = [newDot[0]+r*Math.cos(aos), newDot[1]+r*Math.sin(aos)]; // 计算弧线起点坐标
var pend = [newDot[0]+r*Math.cos(aos2), newDot[1]+r*Math.sin(aos2)]; // 计算弧线终点坐标
var pre = pstart;
for(var i=0; i < angle; i+=2){ // 在指定的角度范围内循环绘制
rad = (i+angleOfSlope)*Math.PI/180;
var cur = [r*Math.cos(rad)+newDot[0], r*Math.sin(rad)+newDot[1]]; // 计算当前弧线上的点
drawLine(pre,cur); // 绘制线段
pre = cur;
    }
}

扇形的绘制方法

三、扇形的绘制方法

扇形由两条半径和一段弧围成，绘制时需将弧的两个端点分别与圆心连接。

// 绘制扇形的主函数
// dot 参数表示扇形所在圆的圆心坐标
// r 参数定义扇形的半径
// angle 参数定义扇形的圆心角
// angleOfSlope 参数定义扇形起始边与X轴的夹角，决定扇形方向
// pop 参数控制是否将扇形整体向外偏移
// title 参数为扇形添加的文本标签
function drawSector(dot, r, angle, angleOfSlope, pop, title){
var newDot = [dot[0], dot[1]]; // 初始化圆心坐标
var a = (angleOfSlope+angle/2)*Math.PI/180;
if(pop){ // 如果启用弹出效果，则重新计算圆心坐标
newDot[0] = dot[0]+10*Math.cos(a);
newDot[1] = dot[1]+10*Math.sin(a);
    }
if(!angleOfSlope){
angleOfSlope = 0;
    }
var aos = angleOfSlope*Math.PI/180;
var aos2 = (angleOfSlope+angle)*Math.PI/180;
var pstart = [newDot[0]+r*Math.cos(aos), newDot[1]+r*Math.sin(aos)]; // 计算弧线起点
var pend = [newDot[0]+r*Math.cos(aos2), newDot[1]+r*Math.sin(aos2)]; // 计算弧线终点
drawLine(newDot,pstart); // 绘制从圆心到起点的半径线
var pre = pstart;
for(var i=0; i < angle; i+=2){ // 在指定角度范围内绘制弧线
rad = (i+angleOfSlope)*Math.PI/180;
var cur = [r*Math.cos(rad)+newDot[0], r*Math.sin(rad)+newDot[1]]; // 计算当前弧线上的点
drawLine(pre,cur); // 绘制弧线线段
pre = cur;
    }
drawPolyline([pre, pend, newDot]); // 连接终点与圆心，使扇形闭合
// 绘制圆心处的标记点
drawPoint({
pw:2,ph:2,color:'DarkRed',point:dot
    });
// 添加文本标签
if(title){
document.write("<span style='height: 24px; line-height: 24px; width: 80px; text-align: center; color: RED; position: absolute; left:"+(newDot[0]+r*(2/4)*Math.cos(a)-40)+"px; top: "+(newDot[1]+r*(2/4)*Math.sin(a)-12)+"'>"+title+"</span>");
    }
}

通过这些基础图形绘制，展示了JavaScript在前端图形处理方面的强大能力。