如何将图像添加到画布中

Question

如何将图像添加到画布中我正在试验HTML中的新画布元素。我只是想在画布上添加一个图像，但由于某些原因，它不起作用。我有以下代码：HTML<canvas id="viewport"></canvas>CSScanvas#viewport { border: 1px solid white; width: 900px; }JSvar canvas = document.getElementById('viewport'),context = canvas.getContext('2d');make_base();function make_base(){   base_image = new Image();   base_image.src = 'img/base.png';   context.drawImage(base_image, 100, 100);}图像存在，我没有看到JavaScript错误。图像不显示。一定是很简单的事情我错过了.。

Answer 1

也许你应该等到图像加载后才画出来。试一试：

var canvas = document.getElementById('viewport'),context = canvas.getContext('2d');make_base();function make_base(){
  base_image = new Image();
  base_image.src = 'img/base.png';
  base_image.onload = function(){
    context.drawImage(base_image, 0, 0);
  }}

也就是说，在图像的onload回调中绘制图像。

Answer 2

在我的例子中，我弄错了函数参数，这些参数是：

context.drawImage(image, left, top);context.drawImage(image, left, top, width, height);

如果你希望他们

context.drawImage(image, width, height);

您将把图像放在画布外面，其效果与问题中描述的效果相同。