Question

我希望在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>

Answer 1

您需要使用..." + variable + "...让String使用变量的值。因为它是你传递rgb( red, green, blue)作为fillStyle，然后默认为黑色，因为它是无效的

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

Demo

Answer 2

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

用HTML 5绘制画布矩形（像素大小）得到一个黑色矩形而不是蓝色？

2 个答案: