欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

怎么使用canvas畫一個(gè)圓-創(chuàng)新互聯(lián)

這篇文章給大家分享的是有關(guān)怎么使用canvas畫一個(gè)圓的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧。

創(chuàng)新互聯(lián)是專業(yè)的瑞安網(wǎng)站建設(shè)公司，瑞安接單;提供成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì),網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行瑞安網(wǎng)站開發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛(ài)的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!

首先我們來(lái)看第一種canvas畫圓的方法：使用canvas arc()方法動(dòng)態(tài)實(shí)現(xiàn)畫圓

arc() 方法創(chuàng)建弧/曲線（用于創(chuàng)建圓或部分圓）。

思路：通過(guò)設(shè)置的開始角度和結(jié)束角度來(lái)做限定，然后通過(guò)累加臨時(shí)的角度變量實(shí)現(xiàn)動(dòng)畫效果。

語(yǔ)法：context.arc(x,y,r,sAngle,eAngle,counterclockwise);

canvas畫圓的實(shí)現(xiàn)代碼：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style type="text/css">
    #myCanvas{
        margin: 0 auto;
        display: block;
    }
    </style>
</head>
<body>
  <canvas id="myCanvas">當(dāng)前瀏覽器不支持canvas組件請(qǐng)升級(jí)！</canvas>
  <script type="text/javascript">
  //方法一：arc 動(dòng)態(tài)畫圓
  var c = document.getElementById('myCanvas');
  var ctx = c.getContext('2d');
  var mW = c.width = 300;
  var mH = c.height = 300;
  var lineWidth = 5;
  var r = mW / 2; //中間位置
  var cR = r - 4 * lineWidth; //圓半徑
  var startAngle = -(1 / 2 * Math.PI); //開始角度
  var endAngle = startAngle + 2 * Math.PI; //結(jié)束角度
  var xAngle = 1 * (Math.PI / 180); //偏移角度量
  var fontSize = 35; //字號(hào)大小
  var tmpAngle = startAngle; //臨時(shí)角度變量
  //渲染函數(shù)
  var rander = function(){
    if(tmpAngle >= endAngle){
      return;
    }else if(tmpAngle + xAngle > endAngle){
      tmpAngle = endAngle;
    }else{
      tmpAngle += xAngle;
    }
    ctx.clearRect(0, 0, mW, mH);
    //畫圈
    ctx.beginPath();
    ctx.lineWidth = lineWidth;
    ctx.strokeStyle = '#1c86d1';
    ctx.arc(r, r, cR, startAngle, tmpAngle);
    ctx.stroke();
    ctx.closePath();
    //寫字
    ctx.fillStyle = '#1d89d5';
    ctx.font= fontSize + 'px Microsoft Yahei';
    ctx.textAlign='center';
    ctx.fillText( Math.round((tmpAngle -  startAngle) / (endAngle - startAngle) * 100) + '%', r, r + fontSize / 2);
    requestAnimationFrame(rander);
  };
  rander();
  </script>
</body>
</html>

canvas畫圓的效果圖：

怎么使用canvas畫一個(gè)圓

其次我們來(lái)看一下第二種canvas畫圓的方法：使用canvas rotate()方法畫圓

rotate() 方法旋轉(zhuǎn)當(dāng)前的繪圖。

思路：通過(guò)重新定義圓點(diǎn)坐標(biāo)為（0，0），然后通過(guò)在規(guī)定范圍內(nèi)旋轉(zhuǎn)圖形，進(jìn)行單點(diǎn)繪制。

語(yǔ)法：context.translate(x,y);

canvas畫圓的實(shí)現(xiàn)代碼：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style type="text/css">
    #myCanvas{  
          margin: 0 auto;        
          display: block;    
          }
    </style></head><body>
  <canvas id="myCanvas">當(dāng)前瀏覽器不支持canvas組件請(qǐng)升級(jí)！</canvas>
  <script type="text/javascript">
  //方法二：rotate() 動(dòng)態(tài)畫圓
  var c = document.getElementById('myCanvas');  
  var ctx = c.getContext('2d');  
  var mW = c.width = 300;  
  var mH = c.height = 300;  
  var lineWidth = 5;  
  var r = mW / 2; //中間位置
  var cR = r - 4 * lineWidth; //圓半徑
  var startAngle = -(1 / 2 * Math.PI); //開始角度
  var endAngle = startAngle + 2 * Math.PI; //結(jié)束角度
  var xAngle = 1 * (Math.PI / 180); //偏移角度量
  var fontSize = 35; //字號(hào)大小
  var tmpAngle = startAngle; //臨時(shí)角度變量
  //渲染函數(shù)
  var rander = function(){
    if(tmpAngle >= endAngle){     
     return;
    }else if(tmpAngle + xAngle > endAngle){
      tmpAngle = endAngle;
    }else{
      tmpAngle += xAngle;
    }
    ctx.clearRect(0, 0, mW, mH);    //畫圈
    ctx.save();
    ctx.beginPath();
    ctx.lineWidth = lineWidth;
    ctx.strokeStyle = '#1c86d1';
    ctx.translate(r, r); //重定義圓點(diǎn)
    ctx.rotate(-Math.PI); //最上方為起點(diǎn)
    for(var i = 0; i <= tmpAngle - startAngle; i += xAngle){ //繪圖
      ctx.moveTo(0, cR - lineWidth);
      ctx.lineTo(0, cR);
      ctx.rotate(xAngle); //通過(guò)旋轉(zhuǎn)角度和畫點(diǎn)的方式繪制圓
    }
    ctx.stroke();
    ctx.closePath();
    ctx.restore();    //寫字
    ctx.fillStyle = '#1d89d5';
    ctx.font= fontSize + 'px Microsoft Yahei';
    ctx.textAlign='center';
    ctx.fillText( Math.round((tmpAngle -  startAngle) / (endAngle - startAngle) * 100) + '%', r, r + fontSize / 2);
    requestAnimationFrame(rander);
  };
  rander();  
  </script>
  </body>
  </html>

canvas畫圓的效果圖：

怎么使用canvas畫一個(gè)圓

最后我們來(lái)看一下第三種canvas畫圓的方法：使用獲取圓坐標(biāo)方式畫圓

思路：通過(guò)sin() 和 cos()按一定的角度偏移量，將開始角度和結(jié)束角度之間的坐標(biāo)位置存于數(shù)組中，然后按照數(shù)組中的坐標(biāo)點(diǎn)進(jìn)行繪制。

canvas畫圓的實(shí)現(xiàn)代碼：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style type="text/css">
    #myCanvas{     
       margin: 0 auto;        
       display: block;    
       }
    </style></head><body>
  <canvas id="myCanvas">當(dāng)前瀏覽器不支持canvas組件請(qǐng)升級(jí)！</canvas>

  <script type="text/javascript">
  //方法三：獲取圓坐標(biāo)方式 動(dòng)態(tài)畫圓
  var c = document.getElementById('myCanvas');  
  var ctx = c.getContext('2d');  
  var mW = c.width = 300;  
  var mH = c.height = 300;  
  var lineWidth = 5;  
  var r = mW / 2; //中間位置
  var cR = r - 4 * lineWidth; //圓半徑
  var startAngle = -(1 / 2 * Math.PI); //開始角度
  var endAngle = startAngle + 2 * Math.PI; //結(jié)束角度
  var xAngle = 2 * (Math.PI / 180); //偏移角度量
  var cArr = []; //圓坐標(biāo)數(shù)組
  //初始化圓坐標(biāo)數(shù)組
  for(var i = startAngle; i <= endAngle; i += xAngle){    
  //通過(guò)sin()和cos()獲取每個(gè)角度對(duì)應(yīng)的坐標(biāo)
    var x = r + cR * Math.cos(i);    
    var y = r + cR * Math.sin(i);
    cArr.push([x, y]);
  }  //移動(dòng)到開始點(diǎn)
  var startPoint = cArr.shift();
  ctx.beginPath();
  ctx.moveTo(startPoint[0], startPoint[1]);  //渲染函數(shù)
  var rander = function(){
    //畫圈
    if(cArr.length){
      ctx.lineWidth = lineWidth;
      ctx.strokeStyle = '#1c86d1';    
      var tmpPoint = cArr.shift();
      ctx.lineTo(tmpPoint[0], tmpPoint[1]);
      ctx.stroke();      
    }else{
      cArr = null;      
      return;
    }
    requestAnimationFrame(rander);
  };
  rander();  
  </script>
  </body>
  </html>

canvas畫圓的效果圖：

怎么使用canvas畫一個(gè)圓

感謝各位的閱讀！關(guān)于怎么使用canvas畫一個(gè)圓就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

當(dāng)前標(biāo)題：怎么使用canvas畫一個(gè)圓-創(chuàng)新互聯(lián)
文章出自：http://chinadenli.net/article26/cdhijg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、品牌網(wǎng)站設(shè)計(jì)、App設(shè)計(jì)、網(wǎng)站建設(shè)、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

微信小程序開發(fā)