html js做转盘的样式,js+canvas实现转盘效果（两个版本）

本文实例为大家分享了js+canvas实现转盘效果的具体代码，供大家参考，具体内容如下

用到了canvas的绘制，旋转，重绘操作，定时器，文本，平移，线条，圆，清理画布等等；

版本一

不可以点击，刷新旋转

转盘抽奖

#myCanvas {

background: #FAEBD7;

}

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

// 保存环境,旋转画布

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

// 环境释放与环境保存成对

}

}, 50);

版本二

加了点击事件

转盘抽奖

#myCanvas {

background: #FAEBD7;

}

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;

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

// 保存环境,旋转画布

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

// 环境释放与环境保存成对

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。