javascript 命运之轮怎么画？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33850201/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to draw a wheel of fortune?
提问by csbk
Im trying to create a game of spin the wheel using this tutorial:
我正在尝试使用本教程创建一个旋转轮子游戏：
however, this tutorial used an image for the wheel and i want to create it in html5/js. something vaguely like this:
但是，本教程使用了车轮图像，我想在 html5/js 中创建它。像这样模糊的东西：
https://www.winkbingo.com/images/lp/301114/spin_the_wheel_image.pngthis is what i have so far:
https://www.winkbingo.com/images/lp/301114/spin_the_wheel_image.png这是我目前所拥有的：
var ctx = canvas.getContext("2d");
var end = 0;
var color = ['#F0F8FF','#FAEBD7','#00FFFF','#7FFFD4','#00FF00','#FF8C00'];
var labels = ['label1', 'label2','label3','label4','label5','label6'];
var slices = 6
for (var i = 0; i < slices; i++) {
ctx.fillStyle = color[i];
ctx.beginPath();
ctx.moveTo(canvas.width/2,canvas.height/2);
ctx.arc(canvas.width/2,canvas.height/2,canvas.height/2,end, ((1/slices)*Math.PI*2)+end ,false);
ctx.lineTo(canvas.width/2,canvas.height/2);
ctx.fill();
end += ((1/slices)*Math.PI*2)+end;
}
i want the number of segments to be able to change by changing the variable slices(between 1-6). and i also want to display the labels on top. then i want to use this canvas instead of the image in that tutorial code so the wheel spins around with the text. hope that wasnt confusing. anyone know how to do this> i dont mind using any libraries etc.
我希望能够通过更改变量切片（1-6 之间）来更改段数。而且我还想在顶部显示标签。然后我想使用这个画布而不是该教程代码中的图像，以便轮子随着文本旋转。希望这不会令人困惑。任何人都知道如何做到这一点> 我不介意使用任何库等。
回答by Roko C. Buljan
var color = ['#ca7','#7ac','#77c','#aac','#a7c','#ac7', "#caa"];
var label = ['10', '200','50','100','5','500',"0"];
var slices = color.length;
var sliceDeg = 360/slices;
var deg = 0;
var ctx = canvas.getContext('2d');
var width = canvas.width; // size
var center = width/2; // center
function deg2rad(deg){ return deg * Math.PI/180; }
function drawSlice(deg, color){
ctx.beginPath();
ctx.fillStyle = color;
ctx.moveTo(center, center);
ctx.arc(center, center, width/2, deg2rad(deg), deg2rad(deg+sliceDeg));
ctx.lineTo(center, center);
ctx.fill();
}
function drawText(deg, text) {
ctx.save();
ctx.translate(center, center);
ctx.rotate(deg2rad(deg));
ctx.textAlign = "right";
ctx.fillStyle = "#fff";
ctx.font = 'bold 30px sans-serif';
ctx.fillText(text, 130, 10);
ctx.restore();
}
for(var i=0; i<slices; i++){
drawSlice(deg, color[i]);
drawText(deg+sliceDeg/2, label[i]);
deg += sliceDeg;
}<canvas id="canvas" width="300" height="300"></canvas>回答by 6502
Just the plain canvasof html5 has all that is needed to draw a quite good-looking "wheel of fortune" with very little code, no need for libraries.
只需简单canvas的 html5 就可以用很少的代码绘制一个漂亮的“命运之轮”，不需要库。
- You can draw pie slices using
arc - You can draw rotated text by using the
translate/rotateglobal transforms - you can add shadows and glow effects
- you can use radial and linear gradients to simulate lighting
- you can use multi-pass renderings (e.g. rendering a lighting gradient over something already drawn
- the speed on modern browsers is quite good... fast enough to render a spinning wheel in realtime (I'd expect drawing a single pre-computed rotating image would be faster especially on mobile devices, this approach would however require to have shadows in another canvas on top of the rotating wheel).
- 您可以使用绘制饼图
arc - 您可以使用
translate/rotate全局变换绘制旋转文本 - 您可以添加阴影和发光效果
- 您可以使用径向和线性渐变来模拟照明
- 您可以使用多通道渲染（例如在已绘制的内容上渲染照明渐变
- 现代浏览器的速度非常好......足以实时渲染旋转轮（我希望绘制单个预先计算的旋转图像会更快，尤其是在移动设备上，但是这种方法需要在旋转轮顶部的另一个画布）。
For example this is what I got with ~100 html lines (3.5k NOTminified) in total:
例如，这是我跟〜100 HTML行了（3.5K不总共精缩）：
Live example at http://raksy.dyndns.org/wheel.html
回答by dougtesting.net
I am the creator of a Javascript library called Winwheel.js which allows easy creation of winning/prize wheels on HTML canvas.
我是一个名为 Winwheel.js 的 Javascript 库的创建者，它允许在 HTML 画布上轻松创建获胜/奖金轮。
The wheels can be code drawn or use graphically rich images and it leverages Greensock's animation platform for the spinning and other animation effects.
轮子可以通过代码绘制或使用图形丰富的图像，它利用 Greensock 的动画平台来实现旋转和其他动画效果。
Here is an example of how easy it is to create a basic code-drawn wheel using Winwheel.js...
下面是一个示例，说明使用 Winwheel.js 创建基本的代码绘制轮是多么容易...
var theWheel = new Winwheel({
'numSegments' : 8,
'segments' :
[
{'fillStyle' : '#eae56f', 'text' : 'Prize 1'},
{'fillStyle' : '#89f26e', 'text' : 'Prize 2'},
{'fillStyle' : '#7de6ef', 'text' : 'Prize 3'},
{'fillStyle' : '#e7706f', 'text' : 'Prize 4'},
{'fillStyle' : '#eae56f', 'text' : 'Prize 5'},
{'fillStyle' : '#89f26e', 'text' : 'Prize 6'},
{'fillStyle' : '#7de6ef', 'text' : 'Prize 7'},
{'fillStyle' : '#e7706f', 'text' : 'Prize 8'}
],
'animation' :
{
'type' : 'spinToStop',
'duration' : 5,
'spins' : 8
}
});
There is a full set of tutorials for Winwheel.js to help you get started on my site. If you are interested please visit http://dougtesting.net/
有一套完整的 Winwheel.js 教程可帮助您开始使用我的网站。如果您有兴趣，请访问http://dougtesting.net/
