代码之家  ›  专栏  ›  技术社区  ›  bpapa

为什么这些油画没有渲染?

  •  1
  • bpapa  · 技术社区  · 15 年前

    我正在创建一个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源代码,其中我有我的画布标记和一些嵌入的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>
    

    还提供了屏幕截图。如你所见,“红色”的画布看起来很好,但是第二张应该是绿色的画布根本就不出现。有什么想法吗? alt text

    2 回复  |  直到 15 年前
        1
  •  2
  •   Alex Martelli    15 年前

    setFillColor解释颜色值的方式有些奇怪--将第二个调用更改为 drawCanvas(1,0,250,0) (而不是 4, 250, 6 对于最后三个参数)和绿色画布显示非常好(在显示本地HTML文件时--@chetan的建议对于不加载的页面是值得的 那个 很快,但它不能解决您的问题;-)。这发生在Safari和Chrome中。不幸的是,我找不到 setFillColor (即将到来的HTML5标准使用了一种不同的方法,并且似乎没有定义这样的方法),因此我无法检查这是否是WebKit bug(WebKit是Safari和Chrome用于渲染的工具)或是参数的不同 设置填充颜色 欲望!

    编辑 :我做了一些实验,似乎希望RGB组件在0.0到1.0之间, 0到255。将呼叫更改为 设置填充颜色 到:

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

    因此看起来工作得很好。

        2
  •  0
  •   Chetan S    15 年前

    您需要等到页面加载完成后才能可靠地执行此操作。 document.getElementById . 通常在window onload或domcontentloaded事件中进行dom操作。

    这应该有效:

    window.onload = function() {
         drawCanvas(0,250,0,0);
         drawCanvas(1,4,250,6);
    }