更改文本和顏色成圖像

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/>作爲一個換行符瀏覽器。