javascript+html5实现绘制圆环的方法

2024-05-06 16:23:56

字体：大中小

来源：转载

供稿：网友

这篇文章主要介绍了javascript+html5实现绘制圆环的方法,实例分析了javascript实现html5基于canvas绘制圆环的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了javascript+html5实现绘制圆环的方法。分享给大家供大家参考。具体如下：

<!DOCTYPE html>

<html>

<head>

<title> </title>

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

</head>

<body>

<fieldset>

<canvas id="myCanvas" width="400px" height="400px" >Your browser does not support the HTML5 canvas tag.</canvas>

</fieldset>

<script type="text/javascript">

function yuanhuan(ctx,data,option){

var cood=option.cood;

var radius=option.radius;

var lastpos=pos=0;

for(var i=0;i<data.length;i++){

ctx.beginPath();

ctx.moveTo(cood.x,cood.y);

ctx.fillStyle = data[i].bgcolor;

pos=lastpos+Math.PI*2*data[i].value/100;

ctx.arc(cood.x,cood.y,radius,lastpos,pos,false);

ctx.fill();

lastpos=pos;

}

ctx.beginPath();

ctx.fillStyle ="white";

radius*=0.5;

ctx.arc(cood.x,cood.y,radius,0,Math.PI*2 ,false);

ctx.fill();

}

var data=[

{bgcolor:'yellowgreen',value:30},

{bgcolor:'green',value:30},

{bgcolor:'yellow',value:40}

];

var canvas = document.getElementById("myCanvas");

var ctx = canvas.getContext("2d");

yuanhuan(ctx,data,{cood:{x:200,y:200},radius:150})

</script>

</body>

</html>