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>