Question

我对Canvas有疑问，这是我的绘图代码：

   .....
   <script>

  function drawImage(imageObj) {
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    var x = 0;
    var y = 0;

    context.drawImage(imageObj, 0, 0);

    var imageData = context.getImageData(x, y, imageObj.width, imageObj.height);
    var data = imageData.data;

    for(var i = 0; i < data.length; i += 4) {
      var brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2] + 0.18 * data[i + 3];

      data[i] = brightness;

      data[i + 1] = brightness;

      data[i + 2] = brightness;

      data[i + 3] = brightness;
    }


    context.putImageData(imageData, 0, 0);
  }

  var imageObj = new Image();
  imageObj.onload = function() {
    drawImage(this);
  };
  imageObj.src = 'lena.jpg';
  </script>
.....

这是我的代码的一部分，即JavaScript中的Canvas，它指示图像是灰度的，它可以在浏览器中显示图像，请注意最后一个命令是从源头加载图像（imageObj。 src =＆＃39; lena.jpg＆＃39;;）但是，当我把这个命令放到脚本的第一行时，浏览器没有显示任何内容，我不知道为什么它必须在最后脚本，请指教，谢谢。

Answer 1

var imageObj = new Image();
  imageObj.onload = function() {
    drawImage(this);
  };
  imageObj.src = 'lena.jpg';

第一行会在哪里？

脚本基本上脚本有5行，就像这样从这里开始。

1. var imageObj = new Image();
2. imageObj.onload = function() {
3.   drawImage(this);
4. };
5. imageObj.src = 'lena.jpg';

第一行上的Puting如下所示：

imageObj.src = 'lena.jpg';
var imageObj = new Image();
  imageObj.onload = function() {
    drawImage(this);
  };

但是当时没有创建图像。

这也应该有效：

var imageObj = new Image();
imageObj.src = 'lena.jpg';
  imageObj.onload = function() {
    drawImage(this);
  };

Answer 2

必须在源之前定义onload函数。否则可能会发生加载图像并且甚至没有定义onload函数。因此，imageObj.src = 'lena.jpg';必须至少在imageObj.onload之后。

但是你可以在drawimage函数之前移动整个块。应该可以正常工作

使用Canvas绘制图像

2 个答案: