Question

我一直在尝试的是根据坐标分配像素颜色。我已经做了一些事情，但我对此很新，我不确定它为什么不起作用。

var canvas = document.getElementById("plane");
var context = canvas.getContext("2d");

// parameters of the plance - should be editable
var width = canvas.width;
var height = canvas.heigth;
var x;
var y;
var color;

var imagedata = context.createImageData(width, height);

function createImage(offset) 
{
    for (x = 0; x < width; x += 1) 
    {
        for (y = 0; y < height; y += 1) 
        {
            if (x < width / 3) 
                color = {r: 256, g: 0, b: 0};

            else if (x < width / 2)
                color = {r: 0, g: 256, b: 0};

            else if (x < width)
                color = {r: 0, g: 0, b: 256};

            var pixelindex = (y * width + x) * 4;
            imagedata.data[pixelindex] = color.r;
            imagedata.data[pixelindex + 1] = color.g;
            imagedata.data[pixelindex + 2] = color.b;            
            imagedata.data[pixelindex + 3] = 255;
        }
    }
}

context.putImageData(imagedata, 0, 0);

我分别创建了HTML。

<html>
<head>
<meta charset="utf-8">
    <title>
    Something
    </title>

    <script type="text/javascript" src="something.js"></script>        

</head>
    <body>        
       <canvas id="plane" width="640" height="480"></canvas>
    </body>
</html>

感谢您的帮助。

Answer 1

你所做错的是var height = canvas.heigth;中的拼写错误，请参阅＆＃34; heig th ＆＃34;，应该是＆＃34; heig ht ＆＃34;你忘记给createImage(0);打电话了。图片未分成三部分，因为width / 3，width / 2和width的数学运算在数学上不是偶数分割。

如果需要，更正版本：

＆＃13;

var canvas = document.getElementById("plane");
var context = canvas.getContext("2d");

// parameters of the plance - should be editable
var width = canvas.width;
var height = canvas.height;
var x;
var y;
var color;

var imagedata = context.createImageData(width, height);

function createImage(offset) {
for (x = 0; x < width; x += 1) {
    for (y = 0; y < height; y += 1) {
        if (x < width / 3) {
            color = {r: 256, g: 0, b: 0};
        } else if (x < 2* width / 3) {
            color = {r: 0, g: 256, b: 0};
        } else if (x < width) {
            color = {r: 0, g: 0, b: 256};
        }

    var pixelindex = (y * width + x) * 4;
    imagedata.data[pixelindex] = color.r;
    imagedata.data[pixelindex + 1] = color.g;
    imagedata.data[pixelindex + 2] = color.b;            
    imagedata.data[pixelindex + 3] = 255;
        }
}
}

createImage(0)

context.putImageData(imagedata, 0, 0);

＆＃13;

<html>
  <head>
    <meta charset="utf-8">
    <title>
      Something
    </title>
  </head>
  <body>
    <canvas id="plane" width="640" height="480"></canvas>
  </body>
</html>

＆＃13;

另外，您还可以使用fillRect或其他画布功能（例如绿色网格）：

＆＃13;

let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
for (let w = 0; w < canvas.width; w++) {
  for (let h = 0; h < canvas.height; h++) {
    if ((w + h) % 2 === 0)
      ctx.fillRect(w, h, 1, 1);
  }
}

＆＃13;

<html>
  <body>
    <canvas id="canvas" width="180" height="120">
      your browswer does not support canvas
    </canvas>
  </body>
</html>

＆＃13;

如何使用JavaScript为HTML5画布中的像素指定颜色？

1 个答案: