使用canvas写圆弧


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>使用arc()方法绘制一条弧线</title>
<style type="text/css">
canvas {
	border:1px solid #000;
}
</style>
<script type="text/javascript">
function Draw(){
	var canvas=document.getElementById("canvas");
	var context = canvas.getContext("2d");
	// 先绘制一个灰色的圆形
	context.beginPath();
	context.arc(120,120,80,0,Math.PI*2,true);	
	context.fillStyle="rgba(0,0,0,0.1)";
	context.fill();
	// 再绘制一条圆弧，宽5像素，线条颜色为橘黄色
	context.beginPath();
	context.arc(120,120,80,0,(-Math.PI*2/3),true);	//圆心，圆心，半径开始角度，结束角度，逆时针
	context.strokeStyle="rgba(255,135,0,1)"; //弧线颜色，也可以使用渐变色
	context.lineWidth=5;  //弧线宽度
	context.stroke(); // 开始u绘制
}
window.addEventListener("load",Draw,true);
</script>
</head>
<body style="overflow:hidden">
<canvas id="canvas" width="400" height="400">你的浏览器不支持该功能！</canvas>
</body>
</html>

arc() 方法创建弧/曲线（用于创建圆或部分圆）。
提示：如需通过 arc() 来创建圆，请把起始角设置为 0，结束角设置为 2*Math.PI。
提示：请使用 stroke() 或 fill() 方法在画布上绘制实际的弧。

相关阅读:
太强了，全面解析缓存应用经典问题
研发人员如何做好管理
Echarts的配置解释(柱状图)legend
合宙ESP32C3 的Arduino开发教程环境配置
怎么找通达信行情接口c++源码？
C# 第五章『面向对象』◆第7节：多态
听说，你想做大模型时代的应用层创业！
（附源码）ssm学校疫情服务平台毕业设计 291202
GPT实战系列-ChatGLM2部署Ubuntu+Cuda11+显存24G实战方案
LLaMA的解读与其微调：Alpaca-LoRA/Vicuna/BELLE/中文LLaMA/姜子牙/LLaMA 2

原文地址：https://blog.csdn.net/m0_64207574/article/details/127411757