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

本文实例讲述了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>

希望本文所述对大家的javascript程序设计有所帮助。

赞 (0)

相关推荐

  • js+html5实现canvas绘制圆形图案的方法

    本文实例讲述了js+html5实现canvas绘制圆形图案的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> Your browser does not sup

  • JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例

    JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例

    本文实例讲述了JavaScript+html5 canvas绘制的圆弧荡秋千效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"> #canvas { margin:50px; border:5px solid gray; box-shadow:0p

  • js+html5实现canvas绘制镂空字体文本的方法

    本文实例讲述了js+html5实现canvas绘制镂空字体文本的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> Your browser does not s

  • JavaScript+html5 canvas绘制渐变区域完整实例

    JavaScript+html5 canvas绘制渐变区域完整实例

    本文实例讲述了JavaScript+html5 canvas绘制渐变区域的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"> #canvas { border:3px solid gray; } </style> </head&

  • js绘制圆形和矩形的方法

    js绘制圆形和矩形的方法

    本文实例讲述了js绘制圆形和矩形的方法.分享给大家供大家参考.具体如下: 这里使用js来绘制圆形和矩形,支持选择图形的背景颜色,同时可设置圆角矩形.半径.正圆.矩形.正方形这几个选项.或许这些图形你不需要,但重要的是让你学会JavaScript绘制图形的方法,这是要表达的核心. 运行效果如下图所示: 具体代码如下: <!doctype html> <html> <head> <title>js来绘制圆形和矩形</title> <style&

  • js+html5实现canvas绘制简单矩形的方法

    本文实例讲述了js+html5实现canvas绘制简单矩形的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not sup

  • JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例

    JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例

    本文实例讲述了JavaScript+html5 canvas绘制缤纷多彩的三角形效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE HTML> <html> <head> <title>demo</title> <style type="text/css"> body { margin:0; padding:0; } #canvas { width:500px; heig

  • JS绘制生成花瓣效果的方法

    JS绘制生成花瓣效果的方法

    本文实例讲述了JS绘制生成花瓣效果的方法.分享给大家供大家参考.具体如下: 这里使用JS绘制生成花瓣效果,纯JS生成的图形绘制效果,想研究一下JavaScript图形绘画方面知识的,不妨参考一下这个小程序,我觉得还是挺不错的. 运行效果如下图所示: 具体代码如下: <html > <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

  • JavaScript+html5 canvas绘制的小人效果

    JavaScript+html5 canvas绘制的小人效果

    本文实例讲述了JavaScript+html5 canvas绘制的小人效果.分享给大家供大家参考,具体如下: 运行效果截图如下: index.html代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> <title>canvas中的缩放</tit

  • js+css绘制颜色动态变化的圈中圈效果

    js+css绘制颜色动态变化的圈中圈效果

    本文实例讲述了js+css绘制颜色动态变化的圈中圈效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <html> <head> <title>circle</title> <style type="text/css" > .circle { border-radius:50%; background:#DDDDDD; } .circle_inside { width:80%; height:80%;

随机推荐