怎么使用html5绘制渐变圆环

lewis 6年前 (2019-01-22) 阅读数 10 #程序编程

文章标签 html5

要使用HTML5绘制渐变圆环，您可以使用<canvas>元素和JavaScript的Canvas API来实现。下面是一个实现的示例：

<!DOCTYPEhtml><html>
<head>
<title>GradientCircle</title>
<style>
canvas{
border:1pxsolidblack;
}
</style>
</head>
<body>
<canvasid="myCanvas"width="200"height="200"></canvas>
<script>
varcanvas=document.getElementById('myCanvas');
varcontext=canvas.getContext('2d');
//圆心和半径
varcenterX=canvas.width/2;
varcenterY=canvas.height/2;
varradius=80;
//创建径向渐变对象
vargradient=context.createRadialGradient(
centerX,centerY,0,
centerX,centerY,radius
);
//添加渐变色
gradient.addColorStop(0,'red');//内部颜色
gradient.addColorStop(1,'orange');//外部颜色
//绘制圆环
context.beginPath();
context.arc(centerX,centerY,radius,0,2*Math.PI);
context.strokeStyle=gradient;
context.lineWidth=20;
context.stroke();
</script>
</body>
</html>