歡迎來到DIVCSS5查找CSS資料與學習DIV CSS布局技術!
  這里并沒引用jquery等第三方庫,只是用dom操作和canvas的特性編寫的。
 
  canvas畫圓大體分為實心圓和空心圓。
 
  根據需求分析知道該圓為實心圓。
 
  1.先用canvas畫實心圓
 
  //偽代碼
 
  varcanvas=document.createElement("canvas");
 
  varctx=canvas.getContext('2d');
 
  ctx.beginPath();
 
  ctx.arc(圓心x軸坐標,圓心y軸坐標,半徑,開始角,結束角);
 
  ctx.fillStyle='green';
 
  ctx.closePath();
 
  ctx.fill();
 
  2.根據不同顏色繪制餅狀圖
 
  
 
  //偽代碼
 
  varcanvas=document.createElement("canvas");
 
  varctx=canvas.getContext('2d');
 
  ctx.beginPath();
 
  ctx.arc(圓心x軸坐標,圓心y軸坐標,半徑,綠色開始角,綠色結束角);
 
  ctx.fillStyle='green';
 
  ctx.closePath();
 
  ctx.fill();
 
  ctx.beginPath();
 
  ctx.arc(圓心x軸坐標,圓心y軸坐標,半徑,紅色開始角,紅色結束角);
 
  ctx.fillStyle='red';
 
  ctx.closePath();
 
  ctx.fill();
 
  ctx.beginPath();
 
  ctx.arc(圓心x軸坐標,圓心y軸坐標,半徑,黃色開始角,黃色結束角);
 
  ctx.fillStyle='yellow';
 
  ctx.closePath();
 
  ctx.fill();
 
  ctx.beginPath();
 
  ctx.arc(圓心x軸坐標,圓心y軸坐標,半徑,紫色開始角,紫色結束角);
 
  ctx.fillStyle='purple';
 
  ctx.closePath();
 
  ctx.fill();
 
  3.動態繪制餅狀圖
 
  動態繪制圓網上普遍推薦三種方法:requestAnimationFrame、setInterval(定時)、還有動態算角度的。
 
  這里我用的是第一種requestAnimationFrame方式。
 
  在編寫的過程中發現一個問題,就是動態畫圓時并不是以圓心的坐標畫的。為了解決這一問題,需要在每次畫圓時重新將canvas的畫筆的坐標定義為最初圓心的坐標。
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  <!DOCTYPEhtml>
 
  <html>
 
  <head>
 
  <metacharset="utf-8">
 
  <title></title>
 
  <style>
 
  #graph{
 
  /*border:1pxsolidblack;
 
  height:100%;
 
  width:100%;
 
  box-sizing:border-box;*/
 
  }
 
  </style>
 
  </head>
 
  <body>
 
  <pid="circle"style="width:500px;float:left;"></p>
 
  </body>
 
  </html>
 
  <scripttype="text/javascript">
 
  (function(window,undefined){
 
  vardata=[
 
  {"product":"產品1","sales":[192.44,210.54,220.84,230.11,220.85,210.59,205.49,200.55,195.71,187.46,180.66,170.90]},
 
  {"product":"產品2","sales":[122.41,133.16,145.65,158.00,164.84,178.62,185.70,190.13,195.53,198.88,204.32,210.91]},
 
  {"product":"產品3","sales":[170.30,175.00,170.79,165.10,165.62,160.92,155.92,145.77,145.17,140.27,135.99,130.33]},
 
  {"product":"產品4","sales":[165.64,170.15,175.10,185.32,190.90,190.01,187.05,183.74,177.24,181.90,179.54,175.98]}
 
  ]
 
  vardom_circle=document.getElementById('circle');
 
  if(dom_circle!=undefined&&dom_circle!=null)
 
  {
 
  varcanvas=document.createElement("canvas");
 
  dom_circle.appendChild(canvas);
 
  varctx=canvas.getContext('2d');
 
  vardefaultStyle=function(Dom,canvas){
 
  if(Dom.clientWidth<=300)
 
  {
 
  canvas.width=300;
 
  Dom.style.overflowX="auto";
 
  }
 
  else{
 
  canvas.width=Dom.clientWidth;
 
  }
 
  if(Dom.clientHeight<=300)
 
  {
 
  canvas.height=300;
 
  Dom.style.overflowY="auto";
 
  }
 
  else
 
  {
 
  canvas.height=Dom.clientHeight;
 
  }
 
  //坐標軸區域
 
  //注意,實際畫折線圖區域還要比這個略小一點
 
  return{
 
  p1:'green',
 
  p2:'red',
 
  p3:'yellow',
 
  p4:'purple',
 
  x:0,//坐標軸在canvas上的left坐標
 
  y:0,//坐標軸在canvas上的top坐標
 
  maxX:canvas.width,//坐標軸在canvas上的right坐標
 
  maxY:canvas.height,//坐標軸在canvas上的bottom坐標
 
  r:(canvas.width)/2,//起點
 
  ry:(canvas.height)/2,//起點
 
  cr:(canvas.width)/4,//半徑
 
  startAngle:-(1/2*Math.PI),//開始角度
 
  endAngle:(-(1/2*Math.PI)+2*Math.PI),//結束角度
 
  xAngle:1*(Math.PI/180)//偏移量
 
  };
 
  }
 
  //畫圓
 
  vartmpAngle=-(1/2*Math.PI);
 
  vards=null;
 
  varsum=data[0]['sales'][0]+data[0]['sales'][1]+data[0]['sales'][2]+data[0]['sales'][3]
 
  varpercent1=data[0]['sales'][0]/sum*Math.PI*2;
 
  varpercent2=data[0]['sales'][1]/sum*Math.PI*2+percent1;
 
  varpercent3=data[0]['sales'][2]/sum*Math.PI*2+percent2;
 
  varpercent4=data[0]['sales'][3]/sum*Math.PI*2+percent3;
 
  console.log(percent1);
 
  console.log(percent2);
 
  console.log(percent3);
 
  console.log(percent4);
 
  vartmpSum=0;
 
  vardrawCircle=function(){
 
  if(tmpAngle>=ds.endAngle)
 
  {
 
  returnfalse;
 
  }
 
  elseif(tmpAngle+ds.xAngle>ds.endAngle)
 
  {
 
  tmpAngle=ds.endAngle;
 
  }
 
  else{
 
  tmpAngle+=ds.xAngle;
 
  tmpSum+=ds.xAngle
 
  }
 
  //console.log(ds.startAngle+'***'+tmpAngle);
 
  //console.log(tmpSum);
 
  //ctx.clearRect(ds.x,ds.y,canvas.width,canvas.height);
 
  if(tmpSum>percent1&&tmpSum<percent2)
 
  {
 
  ctx.beginPath();
 
  ctx.moveTo(ds.r,ds.ry);
 
  ctx.arc(ds.r,ds.ry,ds.cr,ds.startAngle+percent1,tmpAngle);
 
  ctx.fillStyle=ds.p2;
 
  }
 
  elseif(tmpSum>percent2&&tmpSum<percent3)
 
  {
 
  ctx.beginPath();
 
  ctx.moveTo(ds.r,ds.ry);
 
  ctx.arc(ds.r,ds.ry,ds.cr,ds.startAngle+percent2,tmpAngle);
 
  ctx.fillStyle=ds.p3;
 
  }
 
  elseif(tmpSum>percent3)
 
  {
 
  ctx.beginPath();
 
  ctx.moveTo(ds.r,ds.ry);
 
  ctx.arc(ds.r,ds.ry,ds.cr,ds.startAngle+percent3,tmpAngle);
 
  ctx.fillStyle=ds.p4;
 
  }
 
  else{
 
  ctx.beginPath();
 
  ctx.moveTo(ds.r,ds.ry);
 
  ctx.arc(ds.r,ds.ry,ds.cr,ds.startAngle,tmpAngle);
 
  ctx.fillStyle=ds.p1;
 
  }
 
  ctx.closePath();
 
  ctx.fill();
 
  requestAnimationFrame(drawCircle);
 
  }
 
  this.toDraw=function(){
 
  ds=defaultStyle(dom_circle,canvas);
 
  //console.log(tmpAngle);
 
  //console.log(ds.xAngle)
 
  ctx.clearRect(ds.x,ds.y,canvas.width,canvas.height);
 
  drawCircle();
 
  }
 
  this.toDraw();
 
  varself=this;
 
  window.onresize=function(){
 
  self.toDraw()
 
  }
 
  }
 
  })(window);
 
  </script>





本文轉載自中文網
 

如需轉載,請注明文章出處和來源網址:http://www.4389979.live/html/h55046.shtml

河南十一选五大小 多乐彩开奖结果查询 江西 中国软件股票最新消 股票分析师微信头像 甘肃快三今天推荐号遗漏 股票今日开盘 青海快三123位走势 600461洪城水业 广东快乐十分过年停售时间 日发精机股票行情 河北快三基本双和值遗漏