網站建設
                                                       
                                                          收藏本站 
                                                      用戶ID/郵箱: 密 碼:
                                                      客戶中心 Customer service 您目前的位置:首 頁 > 客戶中心 > DIV+CSS 



                                                      DIV+CSS,網站建設DIV+CSS:div里利用canvas進行一個餅形圖的繪制

                                                      div里利用canvas進行一個餅形圖的繪制

                                                      <!DOCTYPE html> 
                                                      <html lang="en"> 
                                                      <head> 
                                                          <meta charset="UTF-8"> 
                                                          <title>繪制餅形圖。</title> 
                                                          <style> 
                                                              canvas{ 
                                                                  border: 1px solid green; 
                                                              } 
                                                          </style> 
                                                      </head> 
                                                      <body> 
                                                          <!-- 繪制餅形圖 --> 
                                                          <canvas width="500" height="500" id="canvas"></canvas> 
                                                      </body> 
                                                      <script> 
                                                          var canvas = document.getElementById(’canvas’); 
                                                          var ctx = canvas.getContext(’2d’); 
                                                          function toAngle(radian){ 
                                                              return radian*180/Math.PI; 
                                                          } 
                                                          function toRadian(angle){ 
                                                              return angle*Math.PI/180; 
                                                          } 
                                                          /*將餅狀圖畫出來*/ 
                                                          var colors = ’green,yellow,pink,blue,red,lightgreen,lightblue’.split(’,’); 
                                                          var text = ’HTML5,Canvas,Javascript,Css3,Ajax,框架封裝,jQuery與移動Web’.split(’,’); 
                                                          var x0 = canvas.width/2, 
                                                              y0 = canvas.height/2, 
                                                              radius = 100, 
                                                              start = -5, 
                                                              distance = 20, 
                                                              padding = 5, 
                                                              step = 360/colors.length; 
                                                          for(var i = 0 ; i < colors.length ; i ++){ 
                                                              ctx.beginPath(); 
                                                              ctx.fillStyle = colors[i]; 
                                                              ctx.moveTo(x0,y0); 
                                                              ctx.arc(x0,y0,radius,toRadian(start),toRadian(start+=step)); 
                                                              ctx.fill(); 
                                                              /*畫斜線*/ 
                                                              ctx.beginPath(); 
                                                              ctx.strokeStyle = colors[i]; 
                                                              var x1 = x0 + (radius+distance)*Math.cos(toRadian(( start-step/2 ))), 
                                                                  y1 = y0 + (radius+distance)*Math.sin(toRadian(( start-step/2 ))); 
                                                              ctx.moveTo(x0,y0); 
                                                              ctx.lineTo(x1,y1); 
                                                              ctx.stroke(); 
                                                              /*寫文字*/ 
                                                              ctx.beginPath(); 
                                                              ctx.fillStyle = colors[i]; 
                                                              var textX = x1, 
                                                                  textY = y1; 
                                                              if(start-step/2 > 90 && start-step/2 < 270){ 
                                                                  ctx.textAlign = ’right’; 
                                                                  textX = textX - padding; 
                                                              }else{ 
                                                                  ctx.textAlign = ’left’; 
                                                                  textX = textX + padding; 
                                                              } 
                                                              ctx.fillText(text[i],textX,textY-padding/2); 
                                                              /*畫直線*/ 
                                                              ctx.beginPath(); 
                                                              ctx.moveTo(x1,y1); 
                                                              //計算文字的寬度 
                                                              var length = ctx.measureText( text[ i ] ).width 
                                                              if(start-step/2 > 90 && start-step/2 < 270){ 
                                                                  x1 += -2*padding-length; 
                                                              }else{ 
                                                                  x1 += 2*padding + length; 
                                                              } 
                                                              ctx.lineTo(x1,y1); 
                                                              ctx.stroke(); 
                                                              /*畫餅形圖*/ 
                                                              /*ctx.beginPath(); 
                                                              ctx.fillStyle = colors[i]; 
                                                              ctx.moveTo(x0,y0); 
                                                              ctx.arc(x0,y0,radius,toRadian(start),toRadian(start+=step)); 
                                                              ctx.fill();*/ 
                                                          } 
                                                      </script> 
                                                      </html>

                                                       


                                                      上一條: 瀏覽器兼容問題與解決方法
                                                      下一條: 關于font-family的用法
                                                      相關文章
                                                      css常用屬性總結之 id和class的區別,使用類還是ID?
                                                      關于左邊固定,右邊自適應布局的響應式布局寫法
                                                      html實現 頁面禁止右鍵 禁止復制 禁止圖片拖動 禁止復制和剪切
                                                      推廣經驗分享
                                                      其它
                                                      網站建設資源
                                                      常見問題
                                                      網站知識
                                                      首頁關于我們業務范圍新聞資訊成功案例客服中心聯系我們深圳網站建設網站優化付款帳戶
                                                      COPYRIGHT(C) 2005-2019 亞網互聯·中國 版權所有 ALL RIGHTS RESERVED (粵ICP備15005241號)
                                                      深圳網站建設公司地址:深圳市寶安區龍華民治大道東明大廈15樓 1529-1531 室   E-Mail:[email protected]  
                                                      公司電話:0755-89812581(8線)  
                                                      深圳市亞網科技有限公司 深圳網站建設常年法律顧問:朱運德律師
                                                      四川金7乐18061809期

                                                                                                                                                              湖北11选五推荐号 超级大乐透app软件下载 有金星vr彩票的 广东时时十一选五开奖结果走势图 幸运飞艇是不是坑人的 重庆时时真坑 149期一码中特 天下彩马会资料 竞彩足球历史数据 山东时时手机下载 时时彩平台哪个好 熊猫彩票充值在提现 赛车游戏怎么用vr 重庆时时后二技巧集锦 武汉麻将 hd 网页 买江西时时的技巧