如何插入图像，而不是文字数据在roullete轮

我使用this example来创建我自己的轮盘，但事情是'而不是价值$ 100 ..'在'选项'我需要使用图像（标志）。我该怎么做？的如何插入图像，而不是文字数据在roullete轮

<input type="button" value="spin" style="float:left;" id='spin' /> 
<canvas id="canvas" width="500" height="500"></canvas> 

var options = ["$100", "$10", "$25", "$250", "$30", "$1000"]; 
var pattern1, pattern2; 
var startAngle = 0; 
var arc = Math.PI/(options.length/2); 
var spinTimeout = null; 

var spinArcStart = 10; 
var spinTime = 0; 
var spinTimeTotal = 0; 
var canvas = document.getElementById("canvas"); 
var ctx; 

document.getElementById("spin").addEventListener("click", spin); 

var img1=new Image(); 
img1.onload=start; 
img1.src="http://oi63.tinypic.com/2n1eyxk.jpg"; 
var img2=new Image(); 
img2.onload=start; 
img2.src="http://oi63.tinypic.com/2n1eyxk.jpg"; 
var imgCount=2; 
function start(){ 
    if(--imgCount>0){return;} 
    pattern1=ctx.createPattern(img1,'repeat'); 
    pattern2=ctx.createPattern(img2,'repeat'); 
    draw(); 
} 


function byte2Hex(n) { 
    var nybHexString = "ABCDEF"; 
    return String(nybHexString.substr((n >> 4) & 0x0F,1)) + nybHexString.substr(n & 0x0F,1); 
} 

function RGB2Color(r,g,b) { 
    return '#' + byte2Hex(r) + byte2Hex(g) + byte2Hex(b); 
} 

function getColor(item, maxitem) { 
    var phase = 0; 
    var center = 128; 
    var width = 127; 
    var frequency = Math.PI*2/maxitem; 

    red = Math.sin(frequency*item+2+phase) * width + center; 
    green = Math.sin(frequency*item+0+phase) * width + center; 
    blue = Math.sin(frequency*item+4+phase) * width + center; 

    return RGB2Color(red,green,blue); 
} 

function drawRouletteWheel() { 
    var canvas = document.getElementById("canvas"); 
    if (canvas.getContext) { 
    var outsideRadius = 200; 
    var textRadius = 160; 
    var insideRadius = 125; 

    ctx = canvas.getContext("2d"); 
    ctx.clearRect(0,0,500,500); 

    ctx.strokeStyle = "black"; 
    ctx.lineWidth = 2; 

    ctx.font = 'bold 12px Helvetica, Arial'; 

    for(var i = 0; i < options.length; i++) { 
     var angle = startAngle + i * arc; 
     //ctx.fillStyle = colors[i]; 
     ctx.fillStyle = getColor(i, options.length); 

     ctx.beginPath(); 
     ctx.arc(250, 250, outsideRadius, angle, angle + arc, false); 
     ctx.arc(250, 250, insideRadius, angle + arc, angle, true); 
     ctx.stroke(); 
     ctx.fill(); 

     ctx.save(); 
     ctx.shadowOffsetX = -1; 
     ctx.shadowOffsetY = -1; 
     ctx.shadowBlur = 0; 
     ctx.shadowColor = "rgb(220,220,220)"; 
     ctx.fillStyle = "black"; 
     ctx.translate(250 + Math.cos(angle + arc/2) * textRadius, 
        250 + Math.sin(angle + arc/2) * textRadius); 
     ctx.rotate(angle + arc/2 + Math.PI/2); 
     var text = options[i]; 
     ctx.fillText(text, -ctx.measureText(text).width/2, 0); 
     ctx.restore(); 
    } 

    //Arrow 
    ctx.fillStyle = "black"; 
    ctx.beginPath(); 
    ctx.moveTo(250 - 4, 250 - (outsideRadius + 5)); 
    ctx.lineTo(250 + 4, 250 - (outsideRadius + 5)); 
    ctx.lineTo(250 + 4, 250 - (outsideRadius - 5)); 
    ctx.lineTo(250 + 9, 250 - (outsideRadius - 5)); 
    ctx.lineTo(250 + 0, 250 - (outsideRadius - 13)); 
    ctx.lineTo(250 - 9, 250 - (outsideRadius - 5)); 
    ctx.lineTo(250 - 4, 250 - (outsideRadius - 5)); 
    ctx.lineTo(250 - 4, 250 - (outsideRadius + 5)); 
    ctx.fill(); 
    } 
} 

function spin() { 
    spinAngleStart = Math.random() * 10 + 10; 
    spinTime = 0; 
    spinTimeTotal = Math.random() * 3 + 4 * 1000; 
    rotateWheel(); 
} 

function rotateWheel() { 
    spinTime += 30; 
    if(spinTime >= spinTimeTotal) { 
    stopRotateWheel(); 
    return; 
    } 
    var spinAngle = spinAngleStart - easeOut(spinTime, 0, spinAngleStart, spinTimeTotal); 
    startAngle += (spinAngle * Math.PI/180); 
    drawRouletteWheel(); 
    spinTimeout = setTimeout('rotateWheel()', 30); 
} 

function stopRotateWheel() { 
    clearTimeout(spinTimeout); 
    var degrees = startAngle * 180/Math.PI + 90; 
    var arcd = arc * 180/Math.PI; 
    var index = Math.floor((360 - degrees % 360)/arcd); 
    ctx.save(); 
    ctx.font = 'bold 30px Helvetica, Arial'; 
    var text = options[index] 
    ctx.fillText(text, 250 - ctx.measureText(text).width/2, 250 + 10); 
    ctx.restore(); 
} 

function easeOut(t, b, c, d) { 
    var ts = (t/=d)*t; 
    var tc = ts*t; 
    return b+c*(tc + -3*ts + 3*t); 
} 

drawRouletteWheel();

在this例如“context.pattern”的使用用途没有允许执行代码和轮盘赌。

来源

2017-06-20 Spirit Break

你的意思是出现在中心后每个自旋或值出现围绕轮盘赌或两者之外的价值？另外，您希望显示的徽标相对于代码的位置在哪里，文件名是什么？ –

轮盘赌的部分内的值，您可以在示例show中看到它们。标志而不是他们，应该有可能性插入任何标志。无论如何，下面的答案似乎工作。 –

代替文本的阵列的我使用的图像的URL的阵列，并转换该使用map图像对象的阵列，所以我可以在画布上绘制和所呈现的文本WS其中，呈现使用drawImage

图像

var options = [ 
 
"http://icons.iconarchive.com/icons/froyoshark/enkel/128/Telegram-icon.png", "http://icons.iconarchive.com/icons/froyoshark/enkel/128/Telegram-icon.png", "http://icons.iconarchive.com/icons/froyoshark/enkel/128/Telegram-icon.png", "http://icons.iconarchive.com/icons/froyoshark/enkel/128/Telegram-icon.png", "http://icons.iconarchive.com/icons/froyoshark/enkel/128/Telegram-icon.png", "http://icons.iconarchive.com/icons/froyoshark/enkel/128/Telegram-icon.png"]; 
 
var pattern1, pattern2; 
 
var startAngle = 0; 
 
var arc = Math.PI/(options.length/2); 
 
var spinTimeout = null; 
 

 
var spinArcStart = 10; 
 
var spinTime = 0; 
 
var spinTimeTotal = 0; 
 
var canvas = document.getElementById("canvas"); 
 
var ctx; 
 

 
options = options.map(x => { 
 
    var img = new Image(); 
 
    img.src = x; 
 
    return img; 
 
}); 
 

 

 
document.getElementById("spin").addEventListener("click", spin); 
 

 

 
function byte2Hex(n) { 
 
    var nybHexString = "ABCDEF"; 
 
    return String(nybHexString.substr((n >> 4) & 0x0F,1)) + nybHexString.substr(n & 0x0F,1); 
 
} 
 

 
function RGB2Color(r,g,b) { 
 
    return '#' + byte2Hex(r) + byte2Hex(g) + byte2Hex(b); 
 
} 
 

 
function getColor(item, maxitem) { 
 
    var phase = 0; 
 
    var center = 128; 
 
    var width = 127; 
 
    var frequency = Math.PI*2/maxitem; 
 

 
    red = Math.sin(frequency*item+2+phase) * width + center; 
 
    green = Math.sin(frequency*item+0+phase) * width + center; 
 
    blue = Math.sin(frequency*item+4+phase) * width + center; 
 

 
    return RGB2Color(red,green,blue); 
 
} 
 

 
function drawRouletteWheel() { 
 
    var canvas = document.getElementById("canvas"); 
 
    if (canvas.getContext) { 
 
    var outsideRadius = 200; 
 
    var textRadius = 160; 
 
    var insideRadius = 125; 
 

 
    ctx = canvas.getContext("2d"); 
 
    ctx.clearRect(0,0,500,500); 
 

 
    ctx.strokeStyle = "black"; 
 
    ctx.lineWidth = 2; 
 

 
    ctx.font = 'bold 12px Helvetica, Arial'; 
 

 
    for(var i = 0; i < options.length; i++) { 
 
     var angle = startAngle + i * arc; 
 
     //ctx.fillStyle = colors[i]; 
 
     ctx.fillStyle = getColor(i, options.length); 
 

 
     ctx.beginPath(); 
 
     ctx.arc(250, 250, outsideRadius, angle, angle + arc, false); 
 
     ctx.arc(250, 250, insideRadius, angle + arc, angle, true); 
 
     ctx.stroke(); 
 
     ctx.fill(); 
 

 
     ctx.save(); 
 
     ctx.shadowOffsetX = -1; 
 
     ctx.shadowOffsetY = -1; 
 
     ctx.shadowBlur = 0; 
 
     ctx.shadowColor = "rgb(220,220,220)"; 
 
     ctx.fillStyle = "black"; 
 
     ctx.translate(250 + Math.cos(angle + arc/2) * textRadius, 
 
        250 + Math.sin(angle + arc/2) * textRadius); 
 
     ctx.rotate(angle + arc/2 + Math.PI/2); 
 
     var img = options[i]; 
 
     \t ctx.drawImage(img, 0, 0, 30, 30); 
 
     //ctx.fillText(text, -ctx.measureText(text).width/2, 0); 
 
     ctx.restore(); 
 
    } 
 

 
    //Arrow 
 
    ctx.fillStyle = "black"; 
 
    ctx.beginPath(); 
 
    ctx.moveTo(250 - 4, 250 - (outsideRadius + 5)); 
 
    ctx.lineTo(250 + 4, 250 - (outsideRadius + 5)); 
 
    ctx.lineTo(250 + 4, 250 - (outsideRadius - 5)); 
 
    ctx.lineTo(250 + 9, 250 - (outsideRadius - 5)); 
 
    ctx.lineTo(250 + 0, 250 - (outsideRadius - 13)); 
 
    ctx.lineTo(250 - 9, 250 - (outsideRadius - 5)); 
 
    ctx.lineTo(250 - 4, 250 - (outsideRadius - 5)); 
 
    ctx.lineTo(250 - 4, 250 - (outsideRadius + 5)); 
 
    ctx.fill(); 
 
    } 
 
} 
 

 
function spin() { 
 
    spinAngleStart = Math.random() * 10 + 10; 
 
    spinTime = 0; 
 
    spinTimeTotal = Math.random() * 3 + 4 * 1000; 
 
    rotateWheel(); 
 
} 
 

 
function rotateWheel() { 
 
    spinTime += 30; 
 
    if(spinTime >= spinTimeTotal) { 
 
    stopRotateWheel(); 
 
    return; 
 
    } 
 
    var spinAngle = spinAngleStart - easeOut(spinTime, 0, spinAngleStart, spinTimeTotal); 
 
    startAngle += (spinAngle * Math.PI/180); 
 
    drawRouletteWheel(); 
 
    spinTimeout = setTimeout('rotateWheel()', 30); 
 
} 
 

 
function stopRotateWheel() { 
 
    clearTimeout(spinTimeout); 
 
    var degrees = startAngle * 180/Math.PI + 90; 
 
    var arcd = arc * 180/Math.PI; 
 
    var index = Math.floor((360 - degrees % 360)/arcd); 
 
    ctx.save(); 
 
    ctx.font = 'bold 30px Helvetica, Arial'; 
 
    //var text = options[index] 
 
    var img = options[index]; 
 
     \t ctx.drawImage(img, -img.width/2, 0, 30, 30); 
 
// ctx.fillText(text, 250 - ctx.measureText(text).width/2, 250 + 10); 
 
    ctx.restore(); 
 
} 
 

 
function easeOut(t, b, c, d) { 
 
    var ts = (t/=d)*t; 
 
    var tc = ts*t; 
 
    return b+c*(tc + -3*ts + 3*t); 
 
} 
 

 
drawRouletteWheel();

<input type="button" value="spin" style="float:left;" id='spin' /> 
 
<canvas id="canvas" width="500" height="500"></canvas>

来源

2017-06-20 13:51:38

谢谢！你能帮助我吗？是否可以在弹出窗口中显示相关文本的图像？（不提醒功能）。我有这个例子[链接]（https://codepen.io/Valikhan/pen/KqqbJd） –

如何插入图像，而不是文字数据在roullete轮

回答

相关问题