本文实例为大家分享了js+canvas实现转盘效果的具体代码,供大家参考,具体内容如下
用到了canvas的绘制,旋转,重绘操作,定时器,文本,平移,线条,圆,清理画布等等;
版本一
不可以点击,刷新旋转
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
|
<!DOCTYPE html>
< html >
< head >
< meta charset = "UTF-8" >
< title >转盘抽奖</ 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();
// 保存环境,旋转画布
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);
</script>
</ html >
|
版本二
加了点击事件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
|
<!DOCTYPE html>
< html >
< head >
< meta charset = "UTF-8" >
< title >转盘抽奖</ 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;
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();
// 环境释放与环境保存成对
}
</script>
</ html >
|
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。
原文链接:https://blog.csdn.net/m0_46690660/article/details/108475487