使用 Canvas 绘制图像

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 = 'lena.jpg';），但是，当我把这个命令放在脚本的第一行时，浏览器没有显示任何东西，我不知道为什么必须在脚本的最后，请指教，谢谢

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';

放在第一行看起来像这样：

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 绘制图像

Drawing image by using Canvas

html

javascript

canvas