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 回答