2.主要的内容
•html5中canvas标签的使用
•jQueryRotate.js旋转插件
3.主要html代码
1
2
3
4
5
6
7
8
9
10
11
12
|
<
body
>
<
div
class
=
"content"
>
<
div
class
=
"wheel"
>
<
canvas
class
=
"item"
id
=
"wheelCanvas"
width
=
"422px"
height
=
"422px"
></
canvas
>
<
img
class
=
"pointer"
src
=
"images/wheel-pointer.png"
/>
</
div
>
</
div
>
<
div
class
=
"tips"
>
<
span
id
=
"tip"
>jason</
span
>
</
div
>
</
body
>
</
html
>
|
4.主要的css代码
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
|
.content{
display
:
block
;
width
:
95%
;
margin
:
30px
auto
;
}
.content .wheel{
display
:
block
;
width
:
100%
;
position
:
relative
;
background-image
:
url
(../images/wheel-bg.png);
background-
size
:
100%
100%
;
}
.content .wheel canvas.item{
width
:
100%
;
}
.content .wheel img.
pointer
{
position
:
absolute
;
width
:
31.5%
;
height
:
42.5%
;
left
:
34.6%
;
top
:
23%
;
}
.tips{
text-align
:
center
;
margin
:
20px
0
;
font
:
normal
24px
'MicroSoft YaHei'
;
}
|
5.核心js代码
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
|
/*
* 渲染转盘
* */
function
drawWheelCanvas(){
// 获取canvas画板,相当于layer??
var
canvas = document.getElementById(
"wheelCanvas"
);
// var canvas = ($("#wheelCanvas")).get()[0]; // 注意,jQuery获取的是包装过的对象,不是DOM对象,可以进行转换
// 计算每块占的角度,弧度制
var
baseAngle = Math.PI * 2 / (turnWheel.rewardNames.length);
// 获取上下文
var
ctx=canvas.getContext(
"2d"
);
var
canvasW = canvas.width;
// 画板的高度
var
canvasH = canvas.height;
// 画板的宽度
//在给定矩形内清空一个矩形
ctx.clearRect(0,0,canvasW,canvasH);
//strokeStyle 绘制颜色
ctx.strokeStyle =
"#FFBE04"
;
// 红色
//font 画布上文本内容的当前字体属性
ctx.font =
'16px Microsoft YaHei'
;
// 注意,开始画的位置是从0°角的位置开始画的。也就是水平向右的方向。
// 画具体内容
for
(
var
index = 0 ; index < turnWheel.rewardNames.length ; index++)
{
// 当前的角度
var
angle = turnWheel.startAngle + index * baseAngle;
// 填充颜色
ctx.fillStyle = turnWheel.colors[index];
// 开始画内容
// ---------基本的背景颜色----------
ctx.beginPath();
/*
* 画圆弧,和IOS的Quartz2D类似
* context.arc(x,y,r,sAngle,eAngle,counterclockwise);
* x :圆的中心点x
* y :圆的中心点x
* sAngle,eAngle :起始角度、结束角度
* counterclockwise : 绘制方向,可选,False = 顺时针,true = 逆时针
* */
ctx.arc(canvasW * 0.5, canvasH * 0.5, turnWheel.outsideRadius, angle, angle + baseAngle,
false
);
ctx.arc(canvasW * 0.5, canvasH * 0.5, turnWheel.insideRadius, angle + baseAngle, angle,
true
);
ctx.stroke();
ctx.fill();
//保存画布的状态,和图形上下文栈类似,后面可以Restore还原状态(坐标还原为当前的0,0),
ctx.save();
/*----绘制奖品内容----重点----*/
// 红色字体
ctx.fillStyle =
"#E5302F"
;
var
rewardName = turnWheel.rewardNames[index];
var
line_height = 17;
// translate方法重新映射画布上的 (0,0) 位置
// context.translate(x,y);
// 见PPT图片,
var
translateX = canvasW * 0.5 + Math.cos(angle + baseAngle / 2) * turnWheel.textRadius;
var
translateY = canvasH * 0.5 + Math.sin(angle + baseAngle / 2) * turnWheel.textRadius;
ctx.translate(translateX,translateY);
// rotate方法旋转当前的绘图,因为文字适合当前扇形中心线垂直的!
// angle,当前扇形自身旋转的角度 + baseAngle / 2 中心线多旋转的角度 + 垂直的角度90°
ctx.rotate(angle + baseAngle / 2 + Math.PI / 2);
/** 下面代码根据奖品类型、奖品名称长度渲染不同效果,如字体、颜色、图片效果。(具体根据实际情况改变) **/
// canvas 的 measureText() 方法返回包含一个对象,该对象包含以像素计的指定字体宽度。
// fillText() 方法在画布上绘制填色的文本。文本的默认颜色是黑色. fillStyle 属性以另一种颜色/渐变来渲染文本
/*
* context.fillText(text,x,y,maxWidth);
* 注意!!!y是文字的最底部的值,并不是top的值!!!
* */
if
(rewardName.indexOf(
"M"
)>0){
//查询是否包含字段 流量包
var
rewardNames = rewardName.split(
"M"
);
for
(
var
j = 0; j<rewardNames.length; j++){
ctx.font = (j == 0)?
'bold 20px Microsoft YaHei'
:
'16px Microsoft YaHei'
;
if
(j == 0){
ctx.fillText(rewardNames[j]+
"M"
, -ctx.measureText(rewardNames[j]+
"M"
).width / 2, j * line_height);
}
else
{
ctx.fillText(rewardNames[j], -ctx.measureText(rewardNames[j]).width / 2, j * line_height);
}
}
}
else
if
(rewardName.indexOf(
"M"
) == -1 && rewardName.length>6){
//奖品名称长度超过一定范围
rewardName = rewardName.substring(0,6)+
"||"
+rewardName.substring(6);
var
rewardNames = rewardName.split(
"||"
);
for
(
var
j = 0; j<rewardNames.length; j++){
ctx.fillText(rewardNames[j], -ctx.measureText(rewardNames[j]).width / 2, j * line_height);
}
}
else
{
//在画布上绘制填色的文本。文本的默认颜色是黑色
ctx.fillText(rewardName, -ctx.measureText(rewardName).width / 2, 0);
}
//添加对应图标
if
(rewardName.indexOf(
"Q币"
)>0){
// 注意,这里要等到img加载完成才能绘制
imgQb.onload=
function
(){
ctx.drawImage(imgQb,-15,10);
};
ctx.drawImage(imgQb,-15,10);
}
else
if
(rewardName.indexOf(
"谢谢参与"
)>=0){
imgSorry.onload=
function
(){
ctx.drawImage(imgSorry,-15,10);
};
ctx.drawImage(imgSorry,-15,10);
}
//还原画板的状态到上一个save()状态之前
ctx.restore();
/*----绘制奖品结束----*/
}
}
|