更改文本和颜色成图像

Question

我只是想为乐趣和自己的经验轮盘赌，我远不是一个JS高手如此..

这是一个现成的代码，我发现：

var colors = ["#B8D430", "#3AB745", "#029990", "#3501CB", 
      "#2E2C75", "#673A7E", "#CC0071", "#F80120", 
      "#F35B20", "#FB9A00", "#FFCC00", "#FEF200"]; 
var restaraunts = ["Wendy's", "McDonalds", "Chick-fil-a", "Five Guys", 
        "Gold Star", "La Mexicana", "Chipotle", "Tazza Mia", 
        "Panera", "Just Crepes", "Arby's", "Indian"]; 

var startAngle = 0; 
var arc = Math.PI/6; 
var spinTimeout = null; 

var spinArcStart = 10; 
var spinTime = 0; 
var spinTimeTotal = 0; 

var ctx; 

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 < 12; i++) { 
     var angle = startAngle + i * arc; 
     ctx.fillStyle = colors[i]; 

     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 = restaraunts[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 = "You won\n" + restaraunts[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(); 

我想知道如何将背景颜色更改为背景图像并将图像添加到restaraunts，并且\n标志不会在var text = "You won\n" + restaraunts[index]上创建新行。

我知道这些都是很基本的问题，但再次 - 我没有那么多熟悉的JS所以，如果有人可以帮助它可以是很酷;）

Answer 1

您可以使用setSyle设置底色图像属性，而不是的背景颜色，并使用< br/>而不是\ n代替新行。

更新：再次，文本绘制在画布上。为了得到一个新的生产线，你可以做这样的事情，因为\ n似乎并没有做太多：

ctx.fillText("You won!", -ctx.measureText(text).width/2, 0); 
ctx.fillText(text, -ctx.measureText(text).width/2, 12); 

更新2：我发现如何绘制图像到画布上，并有设置，以获得图像的矩形部分，但我不知道如何与多边形形状不是矩形但掩盖图像：

function drawImage() { 
    var c=document.getElementById("canvas"); 
    var ctx=c.getContext("2d"); 
    var img=new Image(); 
    img.onload = function() { 
     ctx.drawImage(img,0,0); 
    }; 
    img.src="panera.jpg"; 
} 

Answer 2

您所提供的代码是唯一的JavaScript。你需要有一些HTML和CSS来显示内容并对其进行设计。当你有HTML，您可以更改HTML元素的背景，<div class="myClass"></div>例如用这个CSS：

.myClass 
{ 
    background-color:yellow; 
} 

或有图像作为背景：

.myClass 
{ 
    background-image:url('paper.gif'); 
} 

，是的，使用<br/>作为一个换行符浏览器。