如何将图像添加到画布中

Question

如何将图像添加到画布中

我正在试验HTML中的新画布元素。

我只是想在画布上添加一个图像，但由于某些原因，它不起作用。

我有以下代码：

HTML

<canvas id="viewport"></canvas>

CSS

canvas#viewport { border: 1px solid white; width: 900px; }

JS

var 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);您将把图像放在画布外面，其效果与问题中描述的效果相同。