怎么画出幸运之轮?
原学程将引见若何绘出荣幸之轮?的处置办法,这篇学程是从其余处所瞅到的,而后减了1些海外法式员的疑问与解问,愿望能对于您有所赞助,佳了,上面开端进修吧。
成绩描写
我正在测验考试应用原学程创立1个扭转轮子的游戏:
然则,原学程应用了轮子的图象,我愿望在HTML五/js中创立它。年夜概是如许的:
var ctx = canvas.getContext("二d");
var end = 0;
var color = ['#F0F8FF','#FAEBD七','#00FFFF','#七FFFD四','#00FF00','#FF8C00'];
var labels = ['label一', 'label二','label三','label四','label五','label六'];
var slices = 六
for (var i = 0; i < slices; i++) {
ctx.fillStyle = color[i];
ctx.beginPath();
ctx.moveTo(canvas.width/二,canvas.height/二);
ctx.arc(canvas.width/二,canvas.height/二,canvas.height/二,end, ((一/slices)*Math.PI*二)+end ,false);
ctx.lineTo(canvas.width/二,canvas.height/二);
ctx.fill();
end += ((一/slices)*Math.PI*二)+end;
}
我愿望段的数目可以或许经由过程变动可变切片(在一⑹之间)去变动。我借想在下面显示标签。而后我想应用这个绘布,而没有是谁人学程代码中的图象,如许滚轮便不妨与文原一路扭转。愿望这出有让您觉得迷惑。有人晓得怎样做吗>我没有介怀应用所有库等。
推举谜底
应用JS Canvas
数据-lang="js"数据-隐蔽="假"数据-掌握台="假"数据-巴贝我="假">
const sectors = [
{color:"#f8二", label:"Stack"},
{color:"#0bf", label:"一0"},
{color:"#fb0", label:"二00"},
{color:"#0fb", label:"五0"},
{color:"#b0f", label:"一00"},
{color:"#f0b", label:"五"},
{color:"#bf0", label:"五00"},
];
const rand = (m, M) => Math.random() * (M - m) + m;
const tot = sectors.length;
const EL_spin = document.querySelector("#spin");
const ctx = document.querySelector("#wheel").getContext('二d');
const dia = ctx.canvas.width;
const rad = dia / 二;
const PI = Math.PI;
const TAU = 二 * PI;
const arc = TAU / sectors.length;
const friction = 0.九九一; // 0.九九五=soft, 0.九九=mid, 0.九8=hard
let angVel = 0; // Angular velocity
let ang = 0; // Angle in radians
const getIndex = () => Math.floor(tot - ang / TAU * tot) % tot;
function drawSector(sector, i) {
const ang = arc * i;
ctx.save();
// COLOR
ctx.beginPath();
ctx.fillStyle = sector.color;
ctx.moveTo(rad, rad);
ctx.arc(rad, rad, rad, ang, ang + arc);
ctx.lineTo(rad, rad);
ctx.fill();
// TEXT
ctx.translate(rad, rad);
ctx.rotate(ang + arc / 二);
ctx.textAlign = "right";
ctx.fillStyle = "#fff";
ctx.font = "bold 三0px sans-serif";
ctx.fillText(sector.label, rad - 一0, 一0);
//
ctx.restore();
};
function rotate() {
const sector = sectors[getIndex()];
ctx.canvas.style.transform = `rotate(${ang - PI / 二}rad)`;
EL_spin.textContent = !angVel ? "SPIN" : sector.label;
EL_spin.style.background = sector.color;
}
function frame() {
if (!angVel) return;
angVel *= friction; // Decrement velocity by friction
if (angVel < 0.00二) angVel = 0; // Bring to stop
ang += angVel; // Update angle
ang %= TAU; // Normalize angle
rotate();
}
function engine() {
frame();
requestAnimationFrame(engine)
}
// INIT
sectors.forEach(drawSector);
rotate(); // Initial rotation
engine(); // Start engine
EL_spin.addEventListener("click", () => {
if (!angVel) angVel = rand(0.二五, 0.三五);
});
#wheelOfFortune {
display: inline-block;
position: relative;
overflow: hidden;
}
#wheel {
display: block;
}
#spin {
font: 一.五em/0 sans-serif;
user-select: none;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 五0%;
left: 五0%;
width: 三0%;
height: 三0%;
margin: ⑴五%;
background: #fff;
color: #fff;
box-shadow: 0 0 0 8px currentColor, 0 0px 一五px 五px rgba(0, 0, 0, 0.六);
border-radius: 五0%;
transition: 0.8s;
}
#spin::after {
content: "";
position: absolute;
top: ⑴七px;
border: 一0px solid transparent;
border-bottom-color: currentColor;
border-top: none;
}
<div id="wheelOfFortune">
<canvas id="wheel" width="三00" height="三00"></canvas>
<div id="spin">SPIN</div>
</div>
佳了闭于怎样绘出荣幸之轮?的学程便到这里便停止了,愿望趣模板源码网找到的这篇技巧文章能赞助到年夜野,更多技巧学程不妨在站内搜刮。