真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

如何實現(xiàn)js+canvas的轉(zhuǎn)盤效果

這篇文章主要為大家展示了“如何實現(xiàn)js+canvas的轉(zhuǎn)盤效果”,內(nèi)容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“如何實現(xiàn)js+canvas的轉(zhuǎn)盤效果”這篇文章吧。

創(chuàng)新互聯(lián)是一家集成都做網(wǎng)站、網(wǎng)站制作、網(wǎng)站頁面設(shè)計、網(wǎng)站優(yōu)化SEO優(yōu)化為一體的專業(yè)的建站公司,已為成都等多地近百家企業(yè)提供網(wǎng)站建設(shè)服務(wù)。追求良好的瀏覽體驗,以探求精品塑造與理念升華,設(shè)計最適合用戶的網(wǎng)站頁面。 合作只是第一步,服務(wù)才是根本,我們始終堅持講誠信,負(fù)責(zé)任的原則,為您進(jìn)行細(xì)心、貼心、認(rèn)真的服務(wù),與眾多客戶在蓬勃發(fā)展的市場環(huán)境中,互促共生。

用到了canvas的繪制,旋轉(zhuǎn),重繪操作,定時器,文本,平移,線條,圓,清理畫布等等;

版本一

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







 

 

 轉(zhuǎn)盤抽獎

 

  #myCanvas {

  background: #FAEBD7;

  }

 

 



 

 

 

 

 var myCanvas = document.getElementById("myCanvas");

 var cxt = myCanvas.getContext("2d");

 // 平移畫布

 cxt.translate(250, 250);

 // 圓心坐標(biāo)

 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 = [];

 // 隨機(jī)生成顏色

 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);

 



版本二

加了點擊事件







 

 

 轉(zhuǎn)盤抽獎

 

  #myCanvas {

  background: #FAEBD7;

  }

 

 



 

 

 

 

 var myCanvas = document.getElementById("myCanvas");

 var cxt = myCanvas.getContext("2d");

 // 平移畫布

 cxt.translate(250, 250);

 // 圓心坐標(biāo)

 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 = [];

 // 隨機(jī)生成顏色

 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;

  drawLine();

 myCanvas.onclick = function(event) {

  var mX = event.clientX - myCanvas.offsetLeft;

  var mY = event.clientX - myCanvas.offsetTop;

  if (cxt.isPointInPath(mX, mY)) {

  var j = 50;

  var times = null;

  if (times == null) {

   times = 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];

    cxt.fillText(txt, 0, 0);

   } else {

    drawLine();

   }

   }, 50);

  }

  } else {

  alert("no")

  }

 }



 function drawLine() {

  //重繪

  // 清除畫布

  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( www.588cctv.com );

  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)境保存成對

 }

 



以上是“如何實現(xiàn)js+canvas的轉(zhuǎn)盤效果”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!


當(dāng)前文章:如何實現(xiàn)js+canvas的轉(zhuǎn)盤效果
標(biāo)題URL:http://weahome.cn/article/jepcgi.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部