javascript - 这些 Canvas 为什么不渲染？

我正在创建一个Web应用程序，该应用程序允许用户通过指定RGB值输入多种颜色。提交后，用户将看到带有以所选颜色绘制的实心矩形的画布。

在此页面中，我有7个画布。第一个画得很好，但其余的都没有出现。浏览器是Safari。以下是相关代码：

首先，标题中的script元素定义了我用来绘制画布的函数。

<script language="JavaScript" TYPE="text/javascript"><!--
function drawCanvas(canvasId, red, green, blue) {
var theCanvas = document.getElementById("canvas" + canvasId);

     var context = theCanvas.getContext("2d");

     context.clearRect(0,0,100,100);
     context.setFillColor(red,green,blue,1.0);
     context.fillRect(0,0,100,100);
    }
    // -->
    </script>

接下来是HTML源代码，其中有我的canvas标签和一些嵌入式Javascript来调用drawCanvas函数

<canvas id="canvas0" width="100" height="100">
  </canvas>


   <script language="JavaScript" TYPE="text/javascript"><!--
 drawCanvas(0,250,0,0);
   // -->
 </script>
.
. //more source
.
<canvas id="canvas1" width="100" height="100">
  </canvas>


   <script language="JavaScript" TYPE="text/javascript"><!--
 drawCanvas(1,4,250,6);
   // -->
 </script>

还提供了屏幕截图。如您所见，“红色”画布可以很好地显示，但是第二个应该是绿色的画布根本没有显示。有任何想法吗？

最佳答案

setFillColor解释颜色值的方式有些奇怪-将第二个调用更改为drawCanvas(1,0,250,0)（而不是最后三个args的4, 250, 6），绿色画布显示得很好（在显示本地HTML文件时- -@Chetan的建议对于那些加载速度不太快但无法解决您的问题的页面是值得的；-)。这在Safari和Chrome中都会发生。不幸的是，我找不到setFillColor的文档（即将到来的HTML5标准使用了不同的方法，并且似乎没有定义这种方法），所以我无法检查这是否是webkit的错误（webkit是Safari和Chrome都在使用的） （用于渲染）或args setFillColor想要的差异！

编辑：我做了一些实验，似乎它希望RGB分量在0.0到1.0的范围内，而不是0到255。将对setFillColor的调用更改为：

 context.setFillColor(red/256,green/256,blue/256,1.0);

因此似乎工作正常。