0

元のスクリプトを制御するアクセス権がないため、css を使用してこのスクロール テキスト スクリプト用に作成されたテキストのスタイルを設定しようとしていますが、まったく運がありません。

<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です。フォントの色とサイズを制御できるようにしたい #scrollingText {color:red!important} と canvas#scrollingText {color:red!important} を試しました

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

1 に答える 1

2

スクロールするテキストは DOM 要素で構成されていません。CSS を使用してそれを制御することはできません。

あなたが持っている唯一のコントロールは、すでに使用されているもののようなキャンバスのコンテキスト関数とプロパティを使用することです:

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

色を赤に設定するには、次を使用します。

ctx.fillStyle = "red";
于 2013-08-17T15:37:00.200 に答える