使用canvas写圆弧

农夫三拳有点疼=-=

已于 2022-10-19 17:02:42 修改

阅读量219

点赞数

文章标签： javascript 前端 html

于 2022-10-19 17:02:40 首次发布

本文链接：https://blog.csdn.net/m0_64207574/article/details/127411757

版权

这篇博客详细介绍了如何使用HTML5 Canvas的arc()方法绘制一条弧线，包括创建灰色圆形背景和橘黄色的圆弧。示例代码中展示了如何设置弧线的宽度、颜色和角度，以及如何通过stroke()和fill()方法进行绘制。此外，还提到了arc()方法创建完整圆的技巧和注意事项。

摘要由CSDN通过智能技术生成

<!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>