使用js+canvas實現(xiàn)轉(zhuǎn)盤效果-創(chuàng)新互聯(lián)

今天就跟大家聊聊有關(guān)使用js+canvas實現(xiàn)轉(zhuǎn)盤效果，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

目前創(chuàng)新互聯(lián)建站已為上千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬空間、網(wǎng)站托管運營、企業(yè)網(wǎng)站設(shè)計、中江網(wǎng)站維護等服務(wù)，公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

版本一

不可以點擊，刷新旋轉(zhuǎn)

<!DOCTYPE html>
<html>

 <head>
 <meta charset="UTF-8">
 <title>轉(zhuǎn)盤抽獎</title>
 <style type="text/css">
  #myCanvas {
  background: #FAEBD7;
  }
 </style>
 </head>

 <body>
 <canvas id="myCanvas" width="500" height="500"></canvas>
 </body>
 <script type="text/javascript">
 var myCanvas = document.getElementById("myCanvas");
 var cxt = myCanvas.getContext("2d");
 // 平移畫布
 cxt.translate(250, 250);
 // 圓心坐標
 var oX = 0;
 var oY = 0;
 // 大圓半徑
 var oR = 150;
 // 小圓半徑
 var oR1 = 50;
 // 弧度
 var oH = Math.PI / 180;
 // 定時器
 var timer;
 // 角度
 var angle = 0;
 // 文本
 var textArr = ["JavaScript", "jQuery", "Vue", "ajax", "rect", "angular", "HTML", "css"];
 // 顏色
 var colorArr = [];
 // 隨機生成顏色
 for (var i = 0; i < textArr.length; i++) {
  var c = "rgb(" + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + ")"
  colorArr.push(c);
 }
 //起始速度
 var seep = Math.random() * 100 + 100;
 timer = setInterval(function() {
  if (seep < 0.3) {
  clearInterval(timer);
  var index = Math.floor(angle / 45);
  console.log(index);
  cxt.font = "12px Arial";
  cxt.textAlign = "center";
  cxt.textBaseline = "middle"
  cxt.fillStyle = "black";
  var txt = textArr[textArr.length - index-1];
  //  console.log(cxt.measureText(txt).width);
  cxt.fillText(txt, 0, 0);
  } else {
  //重繪
  // 清除畫布
  cxt.clearRect(-250, -250, 500, 500);
  // 處理角度
  if (angle >= 360) {
   angle = 0;
  }
  // 處理速度
  seep *= 0.95; // 減小速度
  angle += seep;
  
  // 畫短線
  cxt.beginPath();
  cxt.strokeStyle = "red";
  cxt.lineWidth = 2;
  cxt.moveTo(150, 0);
  cxt.lineTo(180, 0);
  cxt.stroke();
  
  // 保存環(huán)境,旋轉(zhuǎn)畫布
  cxt.strokeStyle = "chartreuse";
  cxt.save();
  cxt.rotate(angle * oH);
  
  // 畫扇形
  for (var i = 0; i < 8; i++) {
   cxt.fillStyle = colorArr[i];
   cxt.beginPath();
   cxt.moveTo(0, 0);
   cxt.arc(0, 0, 150, i * 45 * oH, (i + 1) * 45 * oH);
   cxt.closePath();
   cxt.fill();
   cxt.stroke();
  }
  
  // 畫中心圓
  cxt.fillStyle = "#FFF";
  cxt.beginPath();
  cxt.arc(oX, oY, oR1, 0, 2 * Math.PI);
  cxt.fill();
  
  // 添加文字
  for (var i = 0; i < textArr.length; i++) {
   cxt.save();
   cxt.rotate((i * 45 + 25) * oH);
   cxt.fillStyle = "#fff";
   cxt.font = "16px 微軟雅黑";
   cxt.fillText(textArr[i], 70, 0);
   cxt.restore();
  }
  cxt.restore();
  // 環(huán)境釋放與環(huán)境保存成對
  }
 }, 50);
 </script>

</html>

當前題目：使用js+canvas實現(xiàn)轉(zhuǎn)盤效果-創(chuàng)新互聯(lián)
網(wǎng)站網(wǎng)址：http://muchs.cn/article22/dddccc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、移動網(wǎng)站建設(shè)、網(wǎng)站設(shè)計公司、虛擬主機、品牌網(wǎng)站制作、品牌網(wǎng)站設(shè)計

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

猜你還喜歡下面的內(nèi)容