使用 HTML 5 画布矩形（像素大小）绘图会得到黑色矩形而不是蓝色？答案

【问题标题】：Drawing with HTML 5 canvas rectangles (pixel size) gets a black rectangle instead of blue?使用 HTML 5 画布矩形（像素大小）绘图会得到黑色矩形而不是蓝色？
【发布时间】：2014-02-27 20:23:42
【问题描述】：

我希望在 Firefox 的 Canvas 上绘制一个 320 X 240 像素的蓝色大矩形，但我得到了一个黑色矩形。我实际上只是为了实验而绘制像素，由于某种原因，这不能正常工作。代码中的所有内容在 JavaScript 绘图函数中似乎都有意义，但它是一个 nogo 吗？任何想法，这里是代码，

<html>
  <head>
    <title>Canvas</title>
    <script type="text/javascript">
      function draw() 
      {
        var canvas = document.getElementById("canvas");
        if (canvas.getContext) 
        {
            var ctx = canvas.getContext("2d");          
            var red = 0;
            var green = 0;
            var blue = 255;
            ctx.fillStyle = "rgb( red, green, blue)";

            for(var i = 0; i < 320; i++)
            {
                for(var j = 0; j < 240; j++)
                {                   
                    ctx.fillRect (i , j , 1, 1);
                }
            }
        }
      }
    </script>   
    <style type="text/css">
      body
      {
        margin: 50px 50px;
      }
      canvas 
      {         
        border: 1px solid black; 
      }   
      #container
      {
        position: relative;     
        width: 640px;
        height: 480px;
        margin: 0 auto;
      }
    </style>    
  </head>
  <body onload="draw();">
    <div id = "container">
        <canvas id="canvas" width="640px" height="480px"></canvas>
    </div>
  </body>
</html>

【问题讨论】：

标签： javascript html firefox canvas pixels

【解决方案1】：

您需要使用..." + variable + "... 让字符串使用变量的值。实际上，您将 rgb( red, green, blue) 作为填充样式传递，然后默认为黑色，因为它无效

ctx.fillStyle = "rgb("+red+","+green+","+blue+")";

Demo

【讨论】：

【解决方案2】：

ctx.fillStyle = "rgb(" + [red,green,blue].join(',') + ")";

【讨论】：