如何添加图像到画布 [英] How to add image to canvas

问题描述

我在HTML中尝试了一个新的canvas元素。

I'm experimenting a bit with the new canvas element in HTML.

我只想在画布上添加一个图片，

I simply want to add an image to the canvas but it doesn't work for some reason.

我有以下代码：

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错误。

The image exists and I get no JavaScript errors. The image just doesn't display.

这是一个非常简单的错过了...

It must be something really simple I've missed...

推荐答案

也许你应该等到图像加载后再绘制。试试这个：

Maybe you should have to wait until the image is loaded before you draw it. Try this instead:

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, 100, 100);
  }
}

在图像的onload回调中绘制图像。

I.e. draw the image in the onload callback of the image.

这篇关于如何添加图像到画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！