如何使用css控制此js腳本中的嵌入文本

我沒有權限控制原始腳本，因此我試圖使用css爲此滾動文本腳本創建文本樣式，而且我根本沒有任何運氣。如何使用css控制此js腳本中的嵌入文本

<script type="text/javascript"> 


scrollingTextSpeed = 75; 
scrollingTextDirection = "Ticker"; 
scrollingTextx = 500; 
scrollingTexty = 40 * 2; 
scrollingTextxOffset = 6; 
scrollingTextyOffset = 3; 
var scrollingTextArray = new Array(); 
scrollingTextArray[0] = "Mock drafts available..."; 
scrollingTextArray[1] = "Link found in My League menu above..."; 
scrollingTextArray[2] = "Click on Find Mock Draft..."; 
scrollingTextArray[3] = "Winners prepare!"; 
; 
scrollingTextIndex = 0; 

function animateScrollingText() { 
    var ctx = document.getElementById('scrollingText').getContext('2d'); 
    var displayText = scrollingTextArray[scrollingTextIndex]; 
    ctx.fillStyle = "#000000"; 
    // ctx.fillStyle = document.body.style.color; 
    ctx.font = "18" + "pt Verdana"; 
    ctx.clearRect(0,0,500,40); 
    var dim = ctx.measureText(displayText); 
    if (scrollingTextDirection == "Ticker") { 
     scrollingTexty = 40/2; 
     scrollingTextx -= scrollingTextxOffset; 
     if (scrollingTextx < (dim.width * -1)) { 
     scrollingTextx = 500; 
     scrollingTextIndex++; 
     if (scrollingTextIndex >= scrollingTextArray.length) { 
      scrollingTextIndex = 0; 
     } 
     } 
    } else { 
    scrollingTextx = Math.round((500 - dim.width)/2); 
    scrollingTexty -= scrollingTextyOffset; 
    if (scrollingTexty < 0) { 
     scrollingTexty = 100; 
     scrollingTextIndex++; 
     if (scrollingTextIndex >= scrollingTextArray.length) { 
      scrollingTextIndex = 0; 
     } 
    } 
    } 
    if (document.getElementById("scrollingTextLocation")) { 
     document.getElementById("scrollingTextLocation").innerHTML = "scrollingTextx = " + scrollingTextx + ", scrollingTexty = " + scrollingTexty; 
    } 
    ctx.fillText(displayText,scrollingTextx,scrollingTexty); 
} 
</script>

這裏是HTML，我希望能夠CONTRAL字體顏色和大小我曾嘗試#scrollingText {顏色：紅色重要}和帆布＃scrollingText {顏色：紅色重要}

<div align="center"> 
<canvas id="scrollingText" width="500" height="40"> 
HTML5 Scrolling text goes here! 
</canvas> 
</div>

來源

2013-08-17 user2692296

它的使用不工作#scrollingText或canvas＃scrollingText，甚至添加！重要的 – user2692296

想知道是否有可能爲此腳本添加騎行並用ctx.fillStyle =「＃000000」控制顏色。但我不寫js，不會有線索 – user2692296

您的滾動文本不是由DOM元素組成的。你無法使用CSS來控制它。

你必須使用帆布背景下的功能和性能，例如那些已經使用的那些唯一的控制：

ctx.fillStyle = "#000000"; 
ctx.font = "18" + "pt Verdana";

要設置顏色爲紅色，使用

ctx.fillStyle = "red";

來源

2013-08-17 15:37:00

我可以加載一個單獨的腳本函數來搭配現有的設置顏色和字體大小嗎？如果是這樣，你能告訴我它會是什麼，謝謝 – user2692296

是的，你可以加載一個幾乎相同的腳本，只需改變顏色，如我所示。第一個加載後加載它。 –

我必須全部使用它，還是隻使用顏色fillstyle列出的縮小版？ – user2692296

如何使用css控制此js腳本中的嵌入文本

回答

相關問題